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:

Example 1, How to create CSS Border Shadow - examples:

  <!DOCTYPE html>

  <html>

  <head>

  <title>CSS Border Shadow - examples - example</title>

  <style>

  h1 { 

  color:red; 

  } 

.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;

          }

   </style>

  </head>

  <body>

  <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> 

</body>

  </html>

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

Online Editor

ONLINE EDITOR

news templates

COLOR PICKER

news templates

This tool makes it easy to create, adjust, and experiment with custom colors for the web.

HTML Templates

Magnews2 is a modern and creative free magazine and news website template that will help you kick off your online project in style.

CSS HTML Layout

Find here examples of creative and unique website layouts.

Free CSS HTML Menu

Find here examples of creative and unique website CSS HTML menu.