CSS Border Style Longhand Properties

The border-bottom-style, border-top-style, border-left-style and border-right-style CSS properties set the style (solid, dashed, dotted...) of one border of an element. Use border-style as shorthand to set the style of each border independently. The border property will give the four borders the same style.

border-bottom-style: none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset
border-bottom-style: dashed;

The border style defaults to none in all the border properties. It has to be set for the border to show up.

Browser Support: Full.

Usage

The border-style properties are usually used along with border-color, border-width or their longhand properties: border-bottom-color, border-bottom-width...

They are specially useful when overriding the style while preserving color and width. For example:

.example {
border: 10px solid #464646; border-right-style: double; border-bottom-style: double;
}

The above is equivalent to:

border-style: solid double double solid;

See border-style for more.

Line Styles

The following are the available styles or type of borders. dotted, dashed, solid and double use the exact color set by border-color or one of its longhands. groove, ridge, inset and outset use two colors of the same hue, one darker and one lighter than border-color, to achieve a 3D effect.

dotted
dashed
solid
double
groove
ridge
inset
outset

Useful Resources

Leave a Reply

Allowed tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>