Borders

Published Aug 8, 2021Updated Sep 9, 2021
Contribute to Docs

A border is a line that surrounds an element, like a frame around a painting.

Borders can be set with a specific width, style, and color:

  • width: The thickness of the border. A border’s thickness can be set in pixels or with one of the following keywords: thin, medium, or thick.
  • style: The design of the border. Web browsers can render any of 10 different styles. Some of these styles include: none, dotted, and solid.
  • color: The color of the border. Web browsers can render colors using a few different formats, including 140 built-in color keywords.
p {
border: 3px solid coral;
}

In the example above, the border has a width of 3 pixels, a style of solid, and a color of coral. All three properties are set in one line of code.

The default border is medium none color, where color is the current color of the element. If width, style, or color are not set in the CSS file, the web browser assigns the default value for that property.

p.content-header {
height: 80px;
width: 240px;
border: solid coral;
}

In this example, the border style is set to solid and the color is set to coral. The width is not set, so it defaults to medium.

Borders

border
Shorthand property that sets different properties for an elements border in a single declaration.
border-bottom
Shorthand property that defines the width, color, and style of the bottom border of an element.
border-color
Sets the color of the border. The default value is the current element color.
border-left
Shorthand property that defines the width, color, and style of the left border of an element.
border-radius
Rounds the corners of an element.
border-right
Shorthand property that defines the width, color, and style of the right border of an element.
border-style
Sets the style of the border. The default value is none.
border-top
Shorthand property that defines the width, color, and style of the top border of an element.
border-width
Shorthand property that sets the width for the overall border of an element or for each side individually.

All contributors

Looking to contribute?

Learn CSS on Codecademy