HOME | PHP Tutorial | CSS
facebook icon
PHP Tutorial

PHP forms
HTML Tutorial

CSS Tutorial

CSS Border Shadow

CSS Tutorial » CSS Border Shadow

The box-shadow property adds one or more shadows to an element.

CSS Syntax

box-shadow: none or h-offset v-offset blur spread color or inset or initial or inherit;

We can add CSS Style as:
Inline - by using the style attribute in HTML elements
Internal - by using a <style> element in the <head> section
External - by using an external CSS file as style.css

How to create CSS Border Shadow - examples

You can try to execute the following code to change CSS Border Shadow on this page.

Example 1, How to create CSS Border Shadow - examples:
  <!DOCTYPE html>
<title>CSS Border Shadow - examples - example</title>
h1 {
.border_shad1 {
border: 2px solid;
padding: 12px;
box-shadow: 6px 12px;
.border_shad2 {
border: 2px solid;
padding: 12px;
box-shadow: 6px 12px #00CC66;
.border_shad3 {
border: 1px solid;
padding: 10px;
box-shadow: 5px 10px blue;
<h1>CSS Border Shadow - examples</h1>
<div class="border_shad1">You text here: Learn how to create CSS Border Shadow. </div> <br /><br />
<div class="border_shad2">You text here: Learn how to create CSS Border Shadow. </div> <br /><br />
<div class="border_shad3">You text here: Learn how to create CSS Border Shadow. </div><br /><br />
<div style="border: 3px dotted; box-shadow: 6px 18px red">I used inline CSS. You text here:
Learn how to create CSS Border Radius. </div>

css border shadow, bottom, effect, transparent, inside, top, inset, gradient, color CSS Border Shadow - css tutorial

2593. Basic Syntax of CSS - How to Code CSS, css tutorial
Basic Syntax of CSS - How to Code CSS css tutorial

824. Introduction to CSS user interface - CSS tutorials - w3resource


825. Features of w3resource CSS tutorials


820. CSS media - CSS tutorials - w3resource


2226. CSS Tutorial - Build a navigation bar
Normally to create a navigation bar (horizontal or vertical menu) the HTML lists are a good start point. You can then use CSS to give it some awesomeness. You will also use a link inside the li element. So let

2230. CSS Tutorial - External, internal or inline
The inline CSS code is the one that goes inside the head section of the HTML document. This is very useful when you want to give a specific page, his own custom style. The is no difference between the CSS code that you place inside an external file and t

Your add here
PHP isset() Function

PHP wordwrap() function

PHP count() Function

PHP str_repeat() function

PHP implode() function

PHP ltrim() function

PHP htmlspecialchars() function

PHP trim() function

PHP strlen() function

PHP rtrim() function

PHP str_split() function

PHP str_replace() function

PHP strtoupper() function

PHP strtolower() function

PHP strcmp() function

PHP explode() function

CSS Text Style - Text Font Size - Text Align
CSS Table
HTML Image Align
PHP Tutorial - Learn PHP in simple and easy steps starting from basic
HTML Table Width
HTML - Elements: body, head, title