border-image

Border-image enables the use of images as borders. It overrides the border-style property which can act as a fallback if the image is unavailable or border-image in not supported.
Border-image is shorthand for the following properties with there initial values:
border-image-source: none;
border-image-slice: 100%;
border-image-width: 1;
border-image-outset: 0;
border-image-repeat: stretch;

The image can be sliced using 4 length values: top, right, bottom, left. Which creates a grid of 9 areas, the 4 corners, 4 sides and the center which is unused.

box-sizing

Box-Sizing CSS3 has including a new attribute "box sizing". This allows us to choose whether the width set to an element will include borders and padding or whether borders and padding will add to the overall width increasing its size.

The default "box-sizing model" is "content-box" this is what we have traditionally used in previous CSS Models. "Box-Sizing Border-Box" is what is used by Internet Explorer in "Quirks Mode" (Non standard compliant mode).

box-shadow

Adds box-shadows to an element.

/* inset, horizontal length, vertical length, blur radius, spread, color.*/
box-shadow: inset 7px 5px 3px 5px #962096;

  • Inset, if present changes the shadow from an outer to an inner shadow.

  • Horizontal length if positive draws the shadow on the right side of the box, negative value draws to the left side of the box.

  • Vertical length if positive draws to the bottom of the box, negative at the top.

  • Blur radius, 0 value gives a sharp shadow edge, higher values give more blur.

border-radius

Border-radius is a shorthand property for the four properties border-top-right-radius, border-bottom-right-radius, border-bottom-left-radius, border-top-left-radius
If the value contains a slash the value before the slash sets the horizontal radius and after the slash sets the vertical radius.
Without a slash both Horizontal and vertical radii are equal.
Webkit and gecko based browsers currently support border-radius via proprietary properties as shown in the example below.

See also:

  • Border

    • table-layout

    Sets how the browser renders tables. The browser must load all the table data before rendering the table which can cause a slight delay. Setting of fixed allows the browser to use the tables size attributes and uses the first row to cell widths to render the table.

    Syndicate content