Skip to content
Related Articles

Related Articles

CSS | border-style Property
  • Last Updated : 08 Aug, 2019

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.




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

Program 2: Using multiple values for borders.




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

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

full-stack-img

My Personal Notes arrow_drop_up
Recommended Articles
Page :