The border-style
CSS property is a shorthand property that sets the line style for all four sides of an element's border.
/* Keyword values */ border-top-style: none; border-top-style: hidden; border-top-style: dotted; border-top-style: dashed; border-top-style: solid; border-top-style: double; border-top-style: groove; border-top-style: ridge; border-top-style: inset; border-top-style: outset; /* vertical | horizontal */ border-style: dotted solid; /* top | horizontal | bottom */ border-style: hidden double dashed; /* top | right | bottom | left */ border-style: none solid dotted dashed; /* Global values */ border-style: inherit; border-style: initial; border-style: unset;
border-style
is none
. This means that if you change the border-width
and the border-color
, you will not see the border unless you also change this property to something other than none
or hidden
.<div class="grid"> <div class="row"> <div class="cell none">none <p></p></div> <div class="cell hidden">hidden <p></p></div> <div class="cell dotted">dotted <p></p></div> <div class="cell dashed">dashed <p></p></div> <div class="cell solid">solid <p></p></div> <div class="cell double">double <p></p></div> <div class="cell groove">groove <p></p></div> <div class="cell ridge">ridge <p></p></div> <div class="cell inset">inset <p></p></div> <div class="cell outset">outset <p></p></div> <div class="note"> Adjust other border properties: <code>border-color : <input id="border-color" value="black" size="5"></code> <code>border-width : <input id="border-width" value="5px" size="5"></code> <code>border-radius: <input id="border-radius" value="0" size="5"></code> </div> </div> </div>
html,body { height: 100%; box-sizing: border-box; background: #EEE; } .grid { width: 100%; height: 100%; display: flex; font: 1em monospace; } .row { display: flex; flex: 1 auto; flex-direction: row; flex-wrap: wrap; } .col { display: flex; flex: 1 auto; flex-direction: column; } .cell { margin: .5em; padding: .5em; background-color: #FFF; overflow: hidden; text-align: center; } .note { background: #fff3d4; padding: 1em; margin: .5em; font: .8em sans-serif; text-align: left; flex: 1; white-space: nowrap; } code { display: block; margin-top: .5em; font: .8rem monospace; white-space: pre; } p { font-size: 1rem; font-style: normal; background: #E4F0F5; margin: .5em; box-sizing: border-box; width:7em; height:7em; border-width: 5px; border-color: black; } .none p { border-style: none } .hidden p { border-style: hidden } .dotted p { border-style: dotted } .dashed p { border-style: dashed } .solid p { border-style: solid } .double p { border-style: double } .groove p { border-style: groove } .ridge p { border-style: ridge } .inset p { border-style: inset } .outset p { border-style: outset }
window.addEventListener('load', function () { var input = Array.from(document.querySelectorAll('input')); var p = Array.from(document.querySelectorAll('p')); window.addEventListener('input', function () { p.forEach(function (obj) { input.forEach(function (i) { obj.style[i.id] = i.value; }) }) }) })
Initial value | as each of the properties of the shorthand:
|
---|---|
Applies to | all elements. It also applies to ::first-letter . |
Inherited | no |
Media | visual |
Computed value | as each of the properties of the shorthand:
|
Animation type | discrete |
Canonical order | the unique non-ambiguous order defined by the formal grammar |
Syntax
The border-style
property may be specified using one, two, three, or four values.
- When one value is specified, it applies the same style to all four sides.
- When two values are specified, the first style applies to the top and bottom, the second to the left and right.
- When three values are specified, the first style applies to the top, the second to the left and right, the third to the bottom.
- When four values are specified, the styles apply to the top, right, bottom, and left in that order (clockwise).
Each value is a keyword chosen from the list below.
Values
<br-style>
- Describes the style of the border. It can have the following values:
none
Like the hidden
keyword, displays no border. Unless abackground-image
is set, the calculated value ofborder-top-width
will be0
, even if the specified value is something else. In the case of table cell and border collapsing, thenone
value has the lowest priority: if any other conflicting border is set, it will be displayed.hidden
Like the none
keyword, displays no border. Unless abackground-image
is set, the calculated value ofborder-top-width
will be0
, even if the specified value is something else. In the case of table cell and border collapsing, thehidden
value has the highest priority: if any other conflicting border is set, it won't be displayed.dotted
Displays a series of rounded dots. The spacing of the dots is not defined by the specification and is implementation-specific. The radius of the dots is half the calculated border-top-width
.dashed
Displays a series of short square-ended dashes or line segments. The exact size and length of the segments are not defined by the specification and are implementation-specific. solid
Displays a single, straight, solid line. double
Displays two straight lines that add up to the pixel size defined by border-width
orborder-top-width
.groove
Displays a border with a carved appearance. It is the opposite of ridge
.ridge
Displays a border with an extruded appearance. It is the opposite of groove
.inset
Displays a border that makes the element appear embedded. It is the opposite of outset
. When applied to a table cell withborder-collapse
set tocollapsed
, this value behaves likegroove
.outset
Displays a border that makes the element appear embossed. It is the opposite of
inset
. When applied to a table cell withborder-collapse
set tocollapsed
, this value behaves likeridge
.
Formal syntax
<br-style>{1,4}where
<br-style> = none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset
Examples
Table with all property values
Here is an example of all the property values.
HTML
<table> <tr> <td class="b1">none</td> <td class="b2">hidden</td> <td class="b3">dotted</td> <td class="b4">dashed</td> </tr> <tr> <td class="b5">solid</td> <td class="b6">double</td> <td class="b7">groove</td> <td class="b8">ridge</td> </tr> <tr> <td class="b9">inset</td> <td class="b10">outset</td> </tr> </table>
CSS
/* Define look of the table */ table { border-width: 3px; background-color: #52E396; } tr, td { padding: 2px; } /* border-style example classes */ .b1 {border-style:none;} .b2 {border-style:hidden;} .b3 {border-style:dotted;} .b4 {border-style:dashed;} .b5 {border-style:solid;} .b6 {border-style:double;} .b7 {border-style:groove;} .b8 {border-style:ridge;} .b9 {border-style:inset;} .b10 {border-style:outset;}
Output
Specifications
Specification | Status | Comment |
---|---|---|
CSS Backgrounds and Borders Module Level 3 The definition of 'border-style' in that specification. |
Candidate Recommendation | No change. |
CSS Level 2 (Revision 1) The definition of 'border-style' in that specification. |
Recommendation | Adds hidden keyword value. |
CSS Level 1 The definition of 'border-style' in that specification. |
Recommendation | Initial definition. |
Browser compatibility
Feature | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|---|
Basic support | 1 | 12 | 11 | 4 | 3.5 | 1 |
Feature | Android webview | Chrome for Android | Edge mobile | Firefox for Android | IE mobile | Opera Android | iOS Safari |
---|---|---|---|---|---|---|---|
Basic support | 2.6 | ? | 12 | 41 | 7 | Yes | 3 |
1. Prior to Firefox 50, border styles of rounded corners were always rendered as if border-style
was solid. This has been fixed in Firefox 50.
See also
- The border-related shorthand CSS properties:
border
,border-width
,border-color
,border-radius