Category: Web Development & Approved by firstname.lastname@example.org On February-01-2021 12:04:41
property set the style of the element’s four sides border.
Its syntax is: border-style: <style> value;
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.
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.
Displays a single, straight, solid line.
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 two straight lines that add up to the pixel size defined by border-width.
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 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 groove.
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 ridge.
The border-style is shorthand for:
Let see a syntax for all values of border-style property.
//applied in all direction
border-style: solid double;
// vertical | horizontal
border-style: solid double dashed;
// top | vertical | bottom
border-style: solid double dashed hidden;
//top | right | bottom | left
Here the single value will apply border style in all
direction. In two value the first value apply border style in vertical and other value in horizontal direction of an element. In three value the first value apply border style in top and second in vertical direction and third value at bottom of an element. In four value the border style is apply to element side in clockwise it start from top, right, bottom and left.
We have made blog on CSS tutorial from basic, if you haven’t read them so Click Here