Open In App

CSS border-style Property

Improve
Improve
Like Article
Like
Save
Share
Report

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:

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

CSS border-style Property Use Cases:

1. How to create and style border using CSS ?

we can use border properties like style, width, and color to create and style borders in CSS.

2. How to create a Border around an HTML Element using CSS ?

Here we can use CSS properties like border-style, border-width, and border-color to create a border around HTML elements.

to

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


Last Updated : 20 Feb, 2024
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads