In this section, we will learn what the border-style property is and how to use it in CSS.
Click here to run the example of border-style property.
CSS border-style Property Definition and Usage
Styles are a way of making borders look more attractive and fashionable! Also, it helps to make part of a page distinguishable from the other parts.
In order to apply styles to the borders of an element, we can use `border-style` property.
Basically, the `border-style` is a shorthand property that allows us to set styles for all four borders of an element in one declaration.
CSS border-style Property Syntax
border-style: none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset|initial|inherit;
Now the way we use these values for the `border-style` property are:
border-style: value1 value2 value3 value4;
Using this syntax: the value1 is applied to the top border, the value2 is applies to right border; the value3 is applied to bottom border, and the value4 is applied to left border.
—
border-style: value1 value2 value3;
Using this syntax: the value1 is applied to the top border, the value2 is applied to the left and right borders, and finally the value3 is applied to the bottom border.
—
border-style: value1 value2;
Using this syntax: the value1 is applied to the top and bottom borders, and the value2 is applied to the right and left borders.
—
border-style: value
Using this syntax: the value is applied to all four borders of an element.
CSS border-style Property Value
The values for this property are as follows:
- solid: it creates a solid single line.
- dotted: it creates a series of square dots.
- dashed: it creates a series of short lines
- double: it creates two solid lines
- groove: it creates a line that appears to be carved into the page
- ridge: it creates a line that appears to stick out from the page.
- inset: it creates a line that appears to embedded into the page.
- outset: it creates a line that like it is coming out of the display device.
- Hidden/none: using these two values, no borders will be created.
Note: the two global values “initial” and “inherit” could also be used for this property.
Example: CSS border styling
See the Pen CSS border styling by Enjoy Tutorials (@enjoytutorials) on CodePen.
How Does CSS border-style Property Work?
The value we set for the `border- style ` property applies to all 4 sides of the border of an element, which means all have the same style.
But you can set a style for each individual border as well using these properties:
- border-top- style: for setting the style of the top border.
- border-right- style: for setting the style of the right border.
- border-bottom- style: for setting the style of the bottom border.
- border-left-style: for setting the style of the left border.
Example: CSS dashed border
See the Pen CSS dashed border by Enjoy Tutorials (@enjoytutorials) on CodePen.
