CSS Borders (original) (raw)

Last Updated : 7 Apr, 2026

CSS borders define the outline around an HTML element, providing visual separation and emphasis within a webpage layout.

You can try different types of borders here-

HTML `

<style>
    .simple-border {
        border: 2px solid black;
        padding: 20px;
        text-align: center;
    }
</style>
This div has a simple black border.

`

**Syntax:

element {
border: 1px solid black;
}

CSS Border Properties

CSS provides several properties to control and customize borders:

Ways to Style Border in CSS

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

CSS allows you to style each side of a border individually, giving flexibility in design.

5. Border Radius Property

The border-radius property allows you to round the corners of an element, creating smoother edges.

Common Border Styles

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

Border Style Description
Dotted Creates a series of dots.
Dashed Forms a dashed line.
Solid Produces a continuous line.
Double Renders two parallel lines.
Groove Creates 3D grooved effect.
Ridge Creates 3D ridged effect.
Inset Adds 3D inset border.
Outset Adds 3D outset border.
None Removes the border.
Hidden Hides the border.

The following example demonstrates different common border styles using the border-style property in CSS.

HTML `

<style>
    p.dotted {
        border-style: dotted;
    }
    p.dashed {
        border-style: dashed;
    }
    p.solid {
        border-style: solid;
    }
    p.double {
        border-style: double;
    }
</style>

A dotted border.

A dashed border.

A solid border.

A double border.

`

CSS Border Width

CSS border-width is used to define the thickness of the border around an element. It can be specified in various units like px, pt, cm, or by using predefined values like thin, medium, and thick.

HTML `

<style>
    p {
        border-style: solid;
        border-width: 8px;
    }
</style>

CSS Border Width

`

CSS Border Color

CSS border-color is used to define the color of the border. You can set the color using color names, hexadecimal values, or RGB values. If no color is specified, the border will inherit the color of the element itself.

HTML `

<style>
    p {
        border-style: solid;
        border-color: red
    }
</style>

CSS Border color

`

Border radius property

The CSS border-radius property in CSS is used to round the corners of an element's border, giving it a more visually pleasing and smoother appearance.

HTML `

<style>
    h1 {
        border-style: solid;
        text-align: center;
        background: green;
        border-radius: 20px;
    }
</style>

Border Radius Property

`

Practical Use Cases of CSS Borders

CSS borders are commonly used in the following scenarios: