Add a box-shadow to a div element:
![]()
The box-shadow property is supported in IE9+, Firefox 4, Chrome, Opera, and Safari 5.1.1.
The box-shadow property attaches one or more drop-shadows to the box.
| Default value: | none |
|---|---|
| Inherited: | no |
| Version: | CSS3 |
| JavaScript syntax: | object.style.boxShadow="10px 10px 5px #888888" |
Note: The box-shadow property attaches one or more drop-shadows to the
box. The property is a comma-separated list of shadows, each specified by 2-4
length values, an optional color, and an optional inset keyword. Omitted
lengths are 0.
| Value | Description | Play it |
|---|---|---|
| h-shadow | Required. The position of the horizontal shadow. Negative values are allowed | Play it » |
| v-shadow | Required. The position of the vertical shadow. Negative values are allowed | Play it » |
| blur | Optional. The blur distance | Play it » |
| spread | Optional. The size of shadow | Play it » |
| color | Optional. The color of the shadow. Look at CSS Color Values for a complete list of possible color values | Play it » |
| inset | Optional. Changes the shadow from an outer shadow (outset) to an inner shadow | Play it » |
Images
thrown on the table
This example demonstrates how to create "polaroid" pictures and rotate the
pictures.
CSS3 tutorial: CSS3 Borders
Your message has been sent to W3Schools.