The border-style attribute sets the style of the four borders of an element. This property can have one to four values.
Example:
border-style:dotted solid double dashed;
● The upper border is dotted
● The right border is solid Line
● The lower border is a double line
● The left border is a dotted line
border-style:dotted solid double;
● The upper border is dotted
● The right and left borders are solid lines
● The lower border is double lines
border-style:dotted solid;
● The top and bottom borders are dotted
● The right and left borders are solid lines
border-style:dotted;
● All 4 borders are dotted
Attribute values that can be set:
none: Define no borders.
hidden: Same as "none". Except when applied to tables, for which hidden is used to resolve border conflicts.
dotted: Define dotted border. Renders as a solid line in most browsers.
dashed: Define dashed line. Renders as a solid line in most browsers.
solid: Define a solid line.
double: Define double lines. The width of the double line is equal to the value of border-width.
groove: Define the 3D groove border. The effect depends on the value of border-color.
ridge: Define the 3D ridge border. The effect depends on the value of border-color.
inset: Define the 3D inset border. The effect depends on the value of border-color.
outset: Define the 3D outset border. The effect depends on the value of border-color.
inherit: Specifies that the border style should be inherited from the parent element.
Next Section