CSS | border-style Property

The border-style CSS property 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.

Syntax:



border-style: value;

Property Values

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

border-style: none dotted solid dashed;

  • Top border is none(no border)
  • Right border is dotted
  • Bottom border is solid
  • Left border is dashed

border-style: dotted dashed;

  • Top border and bottom borders are dotted
  • Right border and left borders are dashed

border-style: solid;

  • All borders are solid

Below programs illustrate the border-style property:

Program 1: Using only one value for all borders.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


Output:

Program 2: Using multiple values for borders.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


Output:

Supported Browser: The browser supported by border-style Property
are listed below:

  • Chrome 1.0
  • Edge 4.0
  • Firefox 1.0
  • Safari 1.0
  • Opera 3.5


My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.




Article Tags :
Practice Tags :


Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.