CSS border-style Property

CSS border-style Property is used to set the border style, and it 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.

Default Value: none

CSS border-style Property Syntax:

border-style: value;

CSS border-style Property Values:

none: No border is created and it is left plain.
hidden: Just like none, it doesn’t 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 a border.
double: Two lines placed parallel to each other act as the border.
groove: Displays a 3D grooved border, its effect depends on border-color value.
ridge: Displays a 3D ridged border, its effect depends on border-color value.
inset: displays a 3D inset border, its effect depends on border-color value.
outset: Displays a 3D outset border, its effect depends on border-color value.

CSS border-style property is a shorthand for:

CSS border-bottom-style Property: It’s used to set the style of the bottom border of an element.
CSS border-top-style Property: It is used to specify the style of the top border.
CSS border-left-style Property: It is used to set the style of the left border of an element.
CSS border-right-style Property: It is used to change the appearance of the right line segment of the border of an element.
CSS border-block-style Property: It is used to set the individual logical block border-style property values in a single place in the style sheet.
CSS border-inline-style Property: It is an inbuilt property in CSS that is used to set the individual logical block inline-border-style property values in a single place in the style sheet.

The below examples illustrate the use of the border-style property.

CSS border-style property Example :

In This example we are using is using CSS border-style property which contain only one value for all borders.

HTML

<!DOCTYPE html>

<html>

<head>

    <title>Dotted Borders</title>

    <style>

    .GFG {

        border-style: dotted;

        border-width: 6px;

        background: #009900;

        padding: 30px;

        text-align: center;

        width: 300px;

        height: 120px;

    }

    </style>

</head>
 
<body>

    <div class="GFG">

    <h2>GeeksforGeeks</h2> </div>

</body>

</html>

Output:

CSS border-style property Example Explanation:

Here is the explanantion of above exmaple.

Here we have html file with dotted border styling and green background, containing a centered heading.
CSS defines dotted borders, green background, and centered text within a fixed-sized container.

CSS border-style property example with multiple values:

In this example The CSS border-style property accepts multiple values to define different styles for each side of the border.

HTML

<!DOCTYPE html>

<html>

<head>

    <title>Dotted Borders</title>

    <style>

    .GFG {

        border-style: solid double dashed dotted;

        border-width: 6px;

        background: #009900;

        padding: 30px;

        text-align: center;

        width: 300px;

        height: 120px;

    }

    </style>

</head>
 
<body>

    <div class="GFG">

    <h2>GeeksforGeeks</h2> </div>

</body>

</html>

Output:

CSS border-style property with multiple values Example Explanation:

Here is the implemantation of above example.

Here we have a div with 4 different brder style.
we target our div border by using id selctor.
here we are using border-style with multiple values like border-style: solid double dashed dotted; in which solid is top double is right and dashed is bottom and dotted is right side of our given div.