CSS: border-style property
This CSS tutorial explains how to use the CSS property called border-style with syntax and examples.
Description
The CSS border-style property defines the line style of the border of a box.
Syntax
The CSS border-style property can be expressed with one, two, three or four values provided.
One Value
The syntax for the CSS border-style property (with 1 value) is:
border-style: all;When one single value is provided, the border-style value will apply to all four sides of the box (ie: top, right, bottom, left).
Two Values
The syntax for the CSS border-style property (with 2 values) is:
border-style: top_bottom left_right;When two values are provided, the first value will apply to the top and bottom of the box. The second value will apply to the left and right sides of the box.
Three Values
The syntax for the CSS border-style property (with 3 values) is:
border-style: top right_left bottom;When three values are provided, the first value will apply to the top of the box. The second value will apply to the right and left sides of the box. The third value will apply to the bottom of the box.
Four Values
The syntax for the CSS border-style property (with 4 values) is:
border-style: top right bottom left;When four values are provided, the first value will apply to the top of the box. The second value will apply to the right side of the box. The third value will apply to the bottom of the box. The fourth value will apply to the left side of the box.
The top, right, bottom, and left border-style values can be one of the following:
| Value | Description |
|---|---|
| none | No border (This is the default) div { border-style: none; } |
| solid | Single, straight, solid line div { border-style: solid; } |
| dotted | Series of dots div { border-style: dotted; } |
| dashed | Series of short dashes div { border-style: dashed; } |
| double | Two straight lines that total the pixel amount defined by border-width div { border-style: double; } |
| groove | Carved effect div { border-style: groove; } |
| ridge | 3D appearance where border looks like it is "coming out" (opposite of groove) div { border-style: ridge; } |
| inset | Embedded appearance div { border-style: inset; } |
| outset | Embossed appearance (opposite of inset) div { border-style: outset; } |
| hidden | Border is hidden div { border-style: hidden; } |
| inherit | Element will inherit the border-style from its parent element div { border-style: inherit; } |
Note
- In the CSS border-style property, you can combine different border-style values for top, right, bottom, and left sides of the box.
- Since the default value for CSS border-style is none, you must set a CSS border-style value for your border to appear.
- See also the border, border-color, and border-width properties.
Browser Compatibility
The CSS border-style property has basic support with the following browsers:
- Chrome
- Android
- Firefox (Gecko)
- Firefox Mobile (Gecko)
- Internet Explorer (IE)
- IE Phone
- Opera
- Opera Mobile
- Safari (WebKit)
- Safari Mobile
Example
We will discuss the border-style property below, exploring examples of how to use this property in CSS with 1, 2, 3, or 4 values.
div { border-style: solid; }In this CSS border-style example, we have provided one value of solid which would apply to all 4 sides of the box.
Next, we'll look at a CSS border-style example where we provide two values.
div { border-style: dashed dotted; }In this CSS border-style example, we have provided two values. The first value of dashed would apply to the top and bottom of the box. The second value of dotted would apply to the left and right sides of the box.
Next, we'll look at a CSS border-style example where we provide three values.
div { border-style: none solid double; }In this CSS border-style example, we have provided three values. The first value of none would apply to the top of the box. The second value of solid would apply to the right and left sides of the box. The third value of double would apply to the bottom of the box.
Next, we'll look at a CSS border-style example where we provide four values.
div { border-style: inset outset solid solid; }In this CSS border-style example, we have provided four values. The first value of inset would apply to the top of the element. The second value of outset would apply to the right side of the box. The third value of solid would apply to the bottom of the box. The fourth value of solid would apply to the left side of the box.
Advertisements