CSS Borders

In CSS, borders are used to define the edges of an element. The border property is a shorthand property that allows you to set the width, style, and color of an element's border. Additionally, there are separate properties to control each aspect individually.

I have borders on all sides.

I have a red bottom border.

I have rounded borders.

I have a blue left border.

CSS Border Style

The border-style property specifies what kind of border to display.

The following values are allowed:

dotted - Defines a dotted border
dashed - Defines a dashed border
solid - Defines a solid border
double - Defines a double border
groove - Defines a 3D grooved border. The effect depends on the border-color value
ridge - Defines a 3D ridged border. The effect depends on the border-color value
inset - Defines a 3D inset border. The effect depends on the border-color value
outset - Defines a 3D outset border. The effect depends on the border-color value
none - Defines no border
hidden - Defines a hidden border

The border-style property can have from one to four values (for the top border, right border, bottom border, and the left border).

Example

p.dotted {border-style: dotted;}
p.dashed {border-style: dashed;}
p.solid {border-style: solid;}
p.double {border-style: double;}
p.groove {border-style: groove;}
p.ridge {border-style: ridge;}
p.inset {border-style: inset;}
p.outset {border-style: outset;}
p.none {border-style: none;}
p.hidden {border-style: hidden;}
p.mix {border-style: dotted dashed solid double;}

You can click on above box to edit the code and run again.

Output

A dotted border.

A dashed border.

A solid border.

A double border.

A groove border.

A ridge border.

An inset border.

An outset border.

No border.

A mixed border.

Border-width

Specifies the width of the border. It can take values like thin, medium, thick, or a specific length (e.g., 2px).

Example

div {
    border-width: 2px;
}

Border-color:

Sets the color of the border. It can take color names, hex codes, RGB values, or other color representations.

Example

div {
    border-color: #333;
}

You can click on above box to edit the code and run again.

Output

The border shorthand property combines these three properties in the following order: width, style, and color.

Example

div {
    border: 2px solid #333;
}

You can click on above box to edit the code and run again.

Output

You can also set each property individually:

Example

div {
    border-widthv: 2px;
    border-style: solid;
    border-color: #333;
}

You can click on above box to edit the code and run again.

Output

Furthermore, you can set different borders for each side of an element using the properties border-top, border-right, border-bottom, and border-left.

Example

div {
    border-top: 2px solid #333;
    border-right: 1px dashed #555;
    border-bottom: 3px double #777;
    border-left: 1px dotted #999;
}

You can click on above box to edit the code and run again.

Output

These properties give you fine-grained control over the appearance of borders around HTML elements, allowing you to create various styles and effects.

CSS Rounded Borders

The border-radius property is used to add rounded borders to an element:

Normal border

Round border

Rouned border

Roundest border

Example

p {
  border: 2px solid red;
  border-radius: 5px;
}

You can click on above box to edit the code and run again.