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.
|none||No border is created and it is left plain|
|hidden||Just like None it doesnt 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 border.|
|double||Two lines placed parallel to each other act as the border.|
|groove||Displays a 3D grooved border, it’s effect depends on border-color value.|
|ridge||Displays a 3D ridged border, it’s effect depends on border-color value.|
|inset||Displays a 3D inset border, it’s effect depends on border-color value.||outset||Displays a 3D outset border, it’s effect depends on border-color value.|
border-style: none dotted solid dashed; -> Top border is none(no border) -> right border is dotted -> bottom border is solid -> left border is dashed
border-style: dotted dashed; -> Top border and bottom borders are dotted -> right border and left borders are dashed
border-style: solid; All borders are solid
Below programs illustrate the border-style property:
Program 1: Using only one value for all borders.
Program 2: Using multiple values for borders.
Browser Compatibility :
|Browser||Compatible from version:|
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to email@example.com. See your article appearing on the GeeksforGeeks main page and help other Geeks.
Please Improve this article if you find anything incorrect by clicking on the “Improve Article” button below.
Be the First to upvote.
Please write to us at firstname.lastname@example.org to report any issue with the above content.