Border-style property

Category: Web Development & Approved by devanshchakravarti83@gmail.com On February-01-2021 12:04:41

Border-style Property



The border-style property set the style of the element’s four sides border.
Its syntax is: border-style: <style> value;
Values description:

  • none
    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.

  • hidden
    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.

  • solid
    Displays a single, straight, solid line.

  • dashed
    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.

  • double
    Displays two straight lines that add up to the pixel size defined by border-width.

  • dotted
    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.

  • groove
    Displays a border with a carved appearance. It is the opposite of ridge.

  • ridge
    Displays a border with an extruded appearance. It is the opposite of groove.

  • inset
    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.

  • outset
    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:

  • border-top-style

  • border-right-style

  • border-bottom-style

  • border-left-style


Let see a syntax for all values of border-style property.
Example:
“Global value”
border-style: intital;
border-style: inherit;
border-style: unset;
“Keyword Value”
border-style: none;
border-style: hidden;
border-style: dotted;
border-style: dashed;
border-style: solid;
border-style: groove;
border-style: double;
border-style: ridge;
border-style: inset;
border-style: outset;
“Single value”
border-style: solid; //applied in all direction
“Two value”
border-style: solid double; // vertical | horizontal
“Three value”
border-style: solid double dashed; // top | vertical | bottom
“Four value”
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.

Code Example:



We have made blog on CSS tutorial from basic, if you haven’t read them so Click Here


Comments

Share your thoughts about this post
web counter