Borders

CSS Borders

CSS borders surround an element's content and padding. You can control a border's width, style, and color, apply different borders to individual sides, and use rounded corners to change the appearance of the box.

The border Property

The CSS border property adds a border around an element's padding and content. A border can be defined by its width, style, and color.

div {
  border: 2px solid #0088cc;
}

This example creates a 2-pixel solid blue border around the element.

Border Style

The border-style property determines how the border is drawn. Common values include solid, dashed, dotted, and double.

.solid {
  border-style: solid;
}

.dashed {
  border-style: dashed;
}

.dotted {
  border-style: dotted;
}

.double {
  border-style: double;
}

Other available styles include groove, ridge, inset, and outset. The values none and hidden prevent a visible border from being drawn.

A border style must be specified for a normal border to be visible because the initial value of border-style is none.

Border Width

The border-width property controls the thickness of the border. It accepts non-negative length values as well as the keywords thin, medium, and thick.

div {
  border-style: solid;
  border-width: 4px;
}

When a length is used, values such as 1px, 3px, or 0.25rem can control the border thickness.

Border Color

The border-color property controls the color of the border. CSS color formats such as named colors, hexadecimal values, RGB, and HSL can be used.

div {
  border-style: solid;
  border-width: 3px;
  border-color: #0088cc;
}

If a border color is not specified, the border normally uses the element's current text color through the currentColor value.

Border Shorthand

The border shorthand property lets you specify the border width, style, and color in a single declaration.

div {
  border: 3px solid #0088cc;
}

The three parts represent the border width, border style, and border color. The style is required for a visible border, while omitted width or color components use their default values.

Borders on Individual Sides

CSS provides shorthand properties for applying a border to a specific side of an element.

div {
  border-top: 2px solid #0088cc;
  border-right: 2px dashed #777777;
  border-bottom: 4px solid #333333;
  border-left: 6px solid #0088cc;
}

The border-top, border-right, border-bottom, and border-left properties each accept width, style, and color values.

Different Values for Each Side

The individual border width, style, and color properties can also accept multiple values to control the four sides.

div {
  border-style: solid;
  border-width: 2px 4px 6px 8px;
  border-color: #0088cc #777777 #333333 #aaaaaa;
}

When four values are used, they apply clockwise in the order top, right, bottom, and left. Like padding, these properties can also use one, two, or three values.

Rounded Borders

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

div {
  border: 2px solid #0088cc;
  border-radius: 10px;
}

The property can use lengths or percentages, and individual corners can be controlled separately when more detailed shaping is needed.

Borders and Box Size

With the default box-sizing: content-box;, border widths are added outside the content and padding and therefore increase the size of the element's border box.

div {
  width: 300px;
  padding: 20px;
  border: 5px solid #333333;
}

The content width is 300 pixels, the horizontal padding adds 40 pixels, and the left and right borders add another 10 pixels.

300px content width
+ 40px horizontal padding
+ 10px horizontal border
= 350px border-box width

When box-sizing: border-box; is used, the border and padding are included within the declared width. This behavior is covered in the Box Sizing tutorial later in this section.

Try Different Borders

Edit the border width, style, color, and radius values in the example to see how they change the appearance of each element.

Summary

CSS borders surround an element's content and padding. The border-width, border-style, and border-color properties control their appearance, while the border shorthand combines these settings. Borders can be styled separately on each side, and border-radius can create rounded corners.

The next tutorial covers Margins and how CSS creates space outside an element's border.