CSS Borders

CSS Borders

CSS borders surround an element's content and padding and can be customized with different widths, styles, colors, and corner shapes.

The border is one of the four main areas of the CSS box model. It appears between the padding and margin and can be applied to all four sides of an element or controlled separately on each side.

How Borders Work

A border surrounds an element's content and padding. By default, an element does not display a visible border because the initial border-style is none.

.box {
  border: 3px solid steelblue;
}

This creates a 3px solid steel blue border around all four sides of the element.

A visible border normally requires a border style. Setting only a border width or color does not make the border visible while its style remains none.

The border-width Property

The border-width property controls the thickness of an element's border.

.box {
  border-width: 5px;
  border-style: solid;
}

Border width can use CSS length values or the keywords thin, medium, and thick. The initial value is medium, although no border is visible until a border style other than none or hidden is used.

The border-style Property

The border-style property controls the appearance of the border line.

.box {
  border-style: dashed;
}

The exact appearance of some border styles can vary with the border width, color, and browser rendering.

The border-color Property

The border-color property controls the color of the border.

.box {
  border-style: solid;
  border-color: steelblue;
}

Border colors can use the same CSS color values used elsewhere, including named colors, hexadecimal values, RGB, HSL, and other supported color formats.

If a border color is not specified, the border uses currentColor, which normally means it uses the element's current text color.

The border Shorthand Property

The border shorthand property can set the border width, style, and color in a single declaration.

.box {
  border: 4px solid steelblue;
}

In this example, 4px is the border width, solid is the border style, and steelblue is the border color.

The shorthand is convenient when all four sides should use the same border.

Individual Border Sides

Each side of an element can have its own border. CSS provides shorthand properties for the top, right, bottom, and left borders.

.box {
  border-top: 4px solid steelblue;
  border-right: 2px dashed gray;
  border-bottom: 4px solid steelblue;
  border-left: 2px dashed gray;
}

You can also control the width, style, or color of an individual side with properties such as border-top-width, border-right-style, and border-bottom-color.

Different Values for Each Side

The border-width, border-style, and border-color properties can accept one to four values, using the same clockwise pattern as padding.

.box {
  border-style: solid;
  border-width: 2px 4px 6px 8px;
}

With four values, the order is top, right, bottom, left.

Rounded Borders with border-radius

The border-radius property rounds the corners of an element's border box.

.box {
  border: 3px solid steelblue;
  border-radius: 12px;
}

Larger values create more rounded corners. Each corner can also be controlled individually when different corner shapes are needed.

.box {
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
}

A percentage such as 50% can create highly rounded shapes and is commonly used to make a square element appear circular.

Borders and Box Size

With the default box-sizing: content-box, border widths are added outside an element's declared width and height.

.box {
  width: 300px;
  border: 5px solid steelblue;
}

The content area remains 300px wide. The left and right borders add another 10px, making the border box 310px wide before any padding is considered.

300px content width
+ 5px left border
+ 5px right border
= 310px

With box-sizing: border-box, the border is included within the declared width and height. Box sizing is covered in detail later in this section.

Border Example

The following example uses the border shorthand to add a visible border around the box.

.box {
  border: 5px solid steelblue;
}

Open the example in the editor and change the width, style, and color in the border declaration. Try values such as 2px dashed tomato, 8px double green, or 4px dotted purple and run the example to compare the results.