css3 rounded border, border shadow_html/css_WEB-ITnose

border-radius adds a rounded border to an element, in css3. IE9 chrome safari5 firefox4 are now supported. Borders can be set to input divs, etc. Similar to border, the four corners can be set together or individually.

Syntax: border-radius: 1-4 length|% / 1-4 length|%;

-moz-border-radius:10px; supports old firefox

-webkit-border-radius:10px;Supports chrome

Set the value of each radius in the order of top-left, top-right, bottom-right, bottom-left. If bottom-left is omitted, it is the same as top-right. If bottom-right is omitted, it is the same as top-left. If top-right is omitted, it is the same as top-left.

Example 1:

border-radius:2px;

Equivalent to:

border-top-left-radius:2px;

border-top-right-radius:2px;

border-bottom-right-radius:2px;

border-bottom-left-radius:2px; >Example 2:

Border-radius:2em 1em 4em / 0.5em 3em;

Equivalent to:

border-top-left-radius:2em 0.5;

border-top-right-radius:1em 3em;

border-bottom-right-radius:4em 0.5em;

border-bottom-left-radius:1em 3em ;

box-shadow adds one or more shadows to the box. IE9, Firefox 4, Chrome, Opera, and Safari 5.1.1 support the box-shadow attribute.

Syntax: box-shadow: h-shadow v-shadow blur spread color inset;

h-shadow, v-shadow are required. Horizontal and vertical shadow position. Assignment is allowed. blur optional, blur distance. spread optional, the size of the shadow. color optional, the color of the shadow. inset is optional and changes the outer shadow (outset) to the inner shadow.

Example: box-shadow: inset 3px 3px 6px #ccc;