Open In App
Related Articles

CSS Borders

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Report issue
Report

CSS Borders refer to the lines that surround elements, defining their edges. Borders can be styled, colored, and sized using CSS properties such as border-style, border-color, border-width, and border-radius.

Note: Different properties can be set for all the different borders i.e.top border, right border, bottom border, and left border. 

CSS border property :  

The CSS border property enables the styling of an element’s border by setting its width, style, and color, allowing for customizable visual boundaries in web design.

1. Border Style

2. Border Width

3. Border Color

4. Border individual sides

5. Border radius property

CSS Border Style:

The border-style property specifies the type of border. None of the other border properties will work without setting the border style. 

Following are the types of borders:

  • dotted – It describes a dotted border
  • dashed – It describes a dashed border
  • solid – It describes a solid border
  • double – It describes a double border
  • groove – It describes a 3D grooved border.
  • ridge – It describes a 3D ridged border.
  • inset – It describes a 3D inset border.
  • outset – It describes a 3D outset border.
  • none – It describes no border
  • hidden – It describes the hidden border

CSS border-style Example: 

In this exqample we using CSS border-style property.

HTML

<!DOCTYPE html>
<html>
 
<head>
    <style>
        p.dotted {
            border-style: dotted;
        }
 
        p.dashed {
            border-style: dashed;
        }
 
        p.solid {
            border-style: solid;
        }
 
        p.double {
            border-style: double;
        }
    </style>
</head>
 
<body>
    <h2>The border-style Property</h2>
 
    <p>Geeksforgeeks</p>
 
 
    <p class="dotted">A dotted border.</p>
 
    <p class="dashed">A dashed border.</p>
 
    <p class="solid">A solid border.</p>
 
    <p class="double">A double border.</p>
 
</body>
 
</html>

                    

Output: 

CSS border-style Example Output

CSS border-style Example Explanation:

  • Here we defines paragraph elements with different border styles: dotted, dashed, solid, and double.
  • Each paragraph demonstrates a distinct border style applied through the border-style property.
  • CSS classes are used to assign specific border styles to paragraphs, such as .dotted, .dashed, .solid, and .double.
  • When rendered, each paragraph showcases its designated border style, enhancing visual presentation.

CSS Border Width:

Border width sets the width of the border. The width of the border can be in px, pt, cm or thin, medium, and thick.

CSS Border Width Example: 

Here is the basic example of using CSS border width property.

HTML

<!DOCTYPE html>
<html>
 
<head>
    <style>
        p {
            border-style: solid;
            border-width: 8px;
        }
    </style>
</head>
 
<body>
    <p>
        Geeksforgeeks
    </p>
    <p>
        Border properties
    </p>
</body>
 
</html>

                    

Output: 

CSS Border Width Example Output

CSS Border Width Example Explanation:

  • In this example we contains two paragraphs styled with a solid border using CSS.
  • The border width for both paragraphs is set to 8 pixels, defined by the border-width property.
  • Each paragraph displays a solid border surrounding its content, enhancing visual separation.
  • The border width can be adjusted to modify the thickness of the border as desired.

CSS Border Color:

This property is used to set the color of the border. Color can be set using the color name, hex value, or RGB value. If the color is not specified border inherits the color of the element itself.

CSS Border Color Example: 

Here we are implementing above explained border color property.

HTML

<!DOCTYPE html>
<html>
 
<head>
    <style>
        p {
            border-style: solid;
            border-color: red
        }
    </style>
</head>
 
<body>
    <p>
        Geeksforgeeks
    </p>
    <p>
        Border properties:color
    </p>
</body>
 
</html>

                    

Output: 

CSS Border Color Example Output

CSS Border Color Example Explanation:

  • Here we includes two paragraphs styled with a solid border.
  • The border color for both paragraphs is set to red using the border-color property.
  • Each paragraph displays a solid red border around its content, enhancing visual distinction.
  • Border color can be customized by specifying different color values.

CSS Border individual sides:

Using border property, we can provide width, style, and color to all the borders separately for that we have to give some values to all sides of the border.

CSS Border individual sides Syntax: 

border-top-style : dotted;
border-bottom-width: thick;
border-right-color: green;
etc.


CSS Border individual sides Example:

In this example, we set border-top-style as dotted in h2.

HTML

<!DOCTYPE html>
<html>
 
<head>
    <style>
        h2 {
            border-top-style: dotted;
        }
    </style>
</head>
 
<body>
    <h2>Welcome to GeeksforGeeks</h2>
</body>
 
</html>

                    

Output:

CSS Border individual sides Example Output

CSS Border individual sides Example Explanation:

  • In thw above example we contains a single <h2> heading styled with a dotted border on the top.
  • The border style for the top of the heading is set using the border-top-style property.
  • This results in the top border of the heading being displayed as a dotted line.
  • Using CSS, borders can be styled in various ways to enhance the appearance of elements.

Border radius property:

The CSS border-radius property rounds the corners of an element’s border, creating smoother edges, with values specifying the curvature radius.

Border radius property Syntax:

border-radius: value;

Border radius property Example:

Here is the bsic example of using border-radius property.

HTML

<!DOCTYPE html>
<html>
 
<head>
    <style>
        h1 {
            border-style: solid;
            text-align: center;
            background: green;
            border-radius: 20px;
        }
    </style>
</head>
 
<body>
    <h1>GeeksforGeeks</h1>
</body>
 
</html>

                    

Output:

Border radius property Example Output

Border radius property Example Explanation:

  • In the above example we contains a single <h1> heading styled with a solid border.
  • The text inside the heading is centered horizontally using the text-align property.
  • The heading has a green background color and rounded corners achieved with border-radius.
  • This creates a visually appealing header element with a solid border and rounded corners.

CSS Borders Use Cases:

1. How to define the color of the border using CSS ?

to define the color of border we use the border-color property in CSS to define the color of the border.

2. How to specify the double border using CSS ?

Here we Use the border-style property set to double and adjust the border-width property to control the thickness of the double border.

3.How to Add Border Around Text using CSS ?

Here we use the border property with values for style, width, and color to add a border around text in CSS.

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

To create a border around an HTML element using CSS, use the border property to specify style, width, and color.

5.How to create a hidden border using CSS properties ?

To create a hidden border using CSS properties, set the border-style property to hidden or none to hide the border.

CSS Borders Supported Browsers:

  • Google Chrome 1 and above
  • Internet Explorer 4 and above
  • Firefox 1 and above
  • Opera 3.5 and above
  • Safari 1 and above


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