- CSS border-style Property
- Browser Support
- CSS Syntax
- Property Values
- More Examples
- Example
- Example
- Example
- Example
- Example
- Example
- Example
- Example
- Related Pages
- COLOR PICKER
- Report Error
- Thank You For Helping Us!
- border-style
- Try it
- Constituent properties
- Syntax
- Values
- Formal definition
- Formal syntax
- Examples
- All property values
- HTML
- CSS
- Result
- Specifications
- Browser compatibility
- See also
- Found a content problem with this page?
- MDN
- Support
- Our communities
- Developers
CSS border-style Property
The border-style property sets the style of an element’s four borders. This property can have from one to four values.
- border-style: dotted solid double dashed;
- top border is dotted
- right border is solid
- bottom border is double
- left border is dashed
- top border is dotted
- right and left borders are solid
- bottom border is double
- top and bottom borders are dotted
- right and left borders are solid
- all four borders are dotted
Default value: none Inherited: no Animatable: no. Read about animatable Version: CSS1 JavaScript syntax: object.style.borderStyle=»dotted double» Try it Browser Support
The numbers in the table specify the first browser version that fully supports the property.
CSS Syntax
Property Values
Value Description Demo none Default value. Specifies no border Demo ❯ hidden The same as «none», except in border conflict resolution for table elements Demo ❯ dotted Specifies a dotted border Demo ❯ dashed Specifies a dashed border Demo ❯ solid Specifies a solid border Demo ❯ double Specifies a double border Demo ❯ groove Specifies a 3D grooved border. The effect depends on the border-color value Demo ❯ ridge Specifies a 3D ridged border. The effect depends on the border-color value Demo ❯ inset Specifies a 3D inset border. The effect depends on the border-color value Demo ❯ outset Specifies a 3D outset border. The effect depends on the border-color value Demo ❯ initial Sets this property to its default value. Read about initial inherit Inherits this property from its parent element. Read about inherit More Examples
Example
Example
Example
Example
Example
Example
Example
Example
Set different borders on each side of an element:
Related Pages
COLOR PICKER
Report Error
If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail:
Thank You For Helping Us!
Your message has been sent to W3Schools.
Top Tutorials
Top References
Top Examples
Get Certified
W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.
border-style
The border-style shorthand CSS property sets the line style for all four sides of an element’s border.
Try it
Constituent properties
This property is a shorthand for the following CSS properties:
Syntax
/* Keyword values */ border-style: none; border-style: hidden; border-style: dotted; border-style: dashed; border-style: solid; border-style: double; border-style: groove; border-style: ridge; border-style: inset; border-style: outset; /* top and bottom | left and right */ border-style: dotted solid; /* top | left and right | 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: revert; border-style: revert-layer; border-style: unset;
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
Describes the style of the border. It can have the following values:
Like the hidden keyword, displays no border. Unless a background-image is set, the computed value of the same side’s border-width will be 0 , even if the specified value is something else. In the case of table cell and border collapsing, the none value has the lowest priority: if any other conflicting border is set, it will be displayed.
Like the none keyword, displays no border. Unless a background-image is set, the computed value of the same side’s border-width will be 0 , even if the specified value is something else. In the case of table cell and border collapsing, the hidden value has the highest priority: if any other conflicting border is set, it won’t be displayed.
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 computed value of the same side’s border-width .
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.
Displays a single, straight, solid line.
Displays two straight lines that add up to the pixel size defined by border-width .
Displays a border with a carved appearance. It is the opposite of ridge .
Displays a border with an extruded appearance. It is the opposite of groove .
Displays a border that makes the element appear embedded. It is the opposite of outset . When applied to a table cell with border-collapse set to collapsed , this value behaves like ridge .
Displays a border that makes the element appear embossed. It is the opposite of inset . When applied to a table cell with border-collapse set to collapsed , this value behaves like groove .
Formal definition
- border-top-style : none
- border-right-style : none
- border-bottom-style : none
- border-left-style : none
- border-bottom-style : as specified
- border-left-style : as specified
- border-right-style : as specified
- border-top-style : as specified
Formal syntax
border-style =
=
none |
hidden |
dotted |
dashed |
solid |
double |
groove |
ridge |
inset |
outsetExamples
All property values
Here is an example of all the property values.
HTML
pre class="b1">nonepre> pre class="b2">hiddenpre> pre class="b3">dottedpre> pre class="b4">dashedpre> pre class="b5">solidpre> pre class="b6">doublepre> pre class="b7">groovepre> pre class="b8">ridgepre> pre class="b9">insetpre> pre class="b10">outsetpre>
CSS
pre height: 80px; width: 120px; margin: 20px; padding: 20px; display: inline-block; background-color: palegreen; border-width: 5px; box-sizing: border-box; > /* 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; >
Result
Specifications
Browser compatibility
BCD tables only load in the browser
See also
Found a content problem with this page?
This page was last modified on Jun 30, 2023 by MDN contributors.
Your blueprint for a better internet.
MDN
Support
Our communities
Developers
Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.