Skip to content
Related Articles

Related Articles

Improve Article

CSS border-style Property

  • Last Updated : 11 Oct, 2021

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.

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.

Syntax:

border-style: value;

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.

The border-style property is a shorthand for the following CSS properties:

The border-style property may be defined by using one, two, three, or four values, as given below:

  • If a single value is assigned, it will set the style for all 4 sides.
  • If two values are assigned, the first style is set to the top and bottom sides and the second will be set to the left & right sides.
  • If three values are assigned, the first style is set to the top, the second is set to the left and right, the third is set to the bottom.
  • If four-style values are assigned, the styles are set to the top, right, bottom, and left, which follows the clockwise order.

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

Example 1: This example is using 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:

Example 2: This example is using multiple values for borders.

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:

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

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



My Personal Notes arrow_drop_up
Recommended Articles
Page :