CSS border-style Property - GeeksforGeeks

02 Nov, 2021
The border-style CSS property is a shorthand property that sets the line style for all four sides of an element’s border.
Note: The border-style property can take One to Four values at a time.
Syntax:
border-style: value;
Default Value 
none
Property Values:
none: No border is created and it is left plain.
hidden: Just like none, it doesn’t show any border unless a background image is added, then the border-top-width will be set to 0 irrespective of the user-defined value.
dotted: A series of dots are displayed in a line as the border.
solid: A single solid and bold line is used as a border.
dashed: A series of square dashed lines are used as a border.
double: Two lines placed parallel to each other act as the border.
groove: Displays a 3D grooved border, its effect depends on border-color value.
ridge: Displays a 3D ridged border, its effect depends on border-color value.
inset: displays a 3D inset border, its effect depends on border-color value.
outset: Displays a 3D outset border, its effect depends on border-color value.
The border-style property is a shorthand for the following CSS properties:
CSS border-bottom-style Property: It s used to set the style of the bottom border of an element.
CSS border-top-style Property: It is used to specify the style of the top border.
CSS border-left-style Property: It is used to set the style of the left border of an element.
CSS border-right-style Property: It is used to change the appearance of the right line segment of the border of an element.
CSS border-block-style Property: It is used to set the individual logical block border-style property values in a single place in the style sheet.
CSS border-inline-style Property: It is an inbuilt property in CSS which is used to set the individual logical block inline-border-style property values in a single place in the style sheet.
The border-style property may be defined by using one, two, three, or four values, as given below:
If a single value is assigned, it will set the style for all 4 sides.
If two values are assigned, the first style is set to the top and bottom sides and the second will be set to the left & right sides.
If three values are assigned, the first style is set to the top, the second is set to the left and right, the third is set to the bottom.
If four-style values are assigned, the styles are set to the top, right, bottom, and left, which follows the clockwise order.
The below examples illustrate the use of the border-style property.
Example 1: This example is using only one value for all borders. 
HTML
<!DOCTYPE html><html><head>    <title>Dotted Borders</title>    <style>    .GFG {        border-style: dotted;        border-width: 6px;        background: #009900;        padding: 30px;        text-align: center;        width: 300px;        height: 120px;    }    </style></head> <body>    <div class="GFG">        <h2>GeeksforGeeks</h2> </div></body></html>
Output:
Example 2: This example is using multiple values for borders.
HTML
<!DOCTYPE html><html><head>    <title>Dotted Borders</title>    <style>    .GFG {        border-style: solid double dashed dotted;        border-width: 6px;        background: #009900;        padding: 30px;        text-align: center;        width: 300px;        height: 120px;    }    </style></head> <body>    <div class="GFG">        <h2>GeeksforGeeks</h2> </div></body></html>
Output:
Supported Browser: The browser supported by border-style Property are listed below: 
Chrome 1.0
Edge 12.0
IE 4.0
Firefox 1.0
Safari 1.0
Opera 3.5
Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.
bhaskargeeksforgeeks
ManasChhabra2
CSS-Properties
Picked
CSS
HTML
Web Technologies
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to insert spaces/tabs in text using HTML/CSS?
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to update Node.js and NPM to next version ?
How to create footer to stay at the bottom of a Web page?
How to apply style to parent if it has child with CSS?
How to insert spaces/tabs in text using HTML/CSS?
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to update Node.js and NPM to next version ?
How to set the default value for an HTML <select> element ?
Hide or show elements in HTML using display property