Box model: CSS border

The element's border (border) is one or more lines that surround the element's content and padding.

The CSS border property allows you to specify the style, width, and color of an element's border.

CSS Borders

In HTML, we use tables to create borders around text, but by using CSS border properties, we can create excellent borders and apply them to any element.

Inside the element's margin is the element's border (border). The element's border is one or more lines that surround the element's content and padding.

Each border has three aspects: width, style, and color. In the following sections, we will explain these three aspects in detail.

Border and background

The CSS specification states that borders are drawn 'above the element's background'. This is important because some borders are 'interrupted' (such as dotted or dashed borders), and the element's background should appear between the visible parts of the border.

CSS2 indicates that the background extends only to the padding, not to the border. Later, CSS2.1 corrected this: the background of an element is the background of the content, padding, and border area. Most browsers follow the CSS2.1 definition, although some older browsers may have different behavior.

Border styles

Styles are the most important aspect of borders, not because the styles control the display of borders (of course, styles do control the display of borders), but because without styles, there would be no borders at all.

CSS border-style attributeIt defines 10 different non-inherit styles, including none.

For example, you can define the border of an image as outset to make it look like a 'raised button':

a:link img {border-style: outset;}

Define multiple styles

You can define multiple styles for a border, for example:

p.aside {border-style: solid dotted dashed double;}

The rule above defines four border styles for paragraphs with the class name 'aside': solid top border, dotted right border, dashed bottom border, and a double left border.

We have seen here that the values follow the order of top-right-bottom-left, and this order has also been discussed when setting different padding with multiple values.

Define single-side style

If you want to set the border style for one side of the element box instead of setting the border style for all 4 sides, you can use the following single-side border style properties:

Therefore, these two methods are equivalent:

p {border-style: solid solid solid none;}
p {border-style: solid; border-left-style: none;}

Note:If you want to use the second method, you must place the single side property after the shorthand property. Because if the single side property is placed before the border-style, the value of the shorthand property will override the single side value none.

border width

You can set the border-width propertySpecify the width of the border.

There are two ways to specify the width of a border: you can specify a length value, such as 2px or 0.1em; or use one of the 3 keywords, which are thin, medium (the default value), and thick.

Note:CSS does not define the specific width of the 3 keywords, so one user agent may set thin, medium, and thick to be equal to 5px, 3px, and 2px, while another user agent may set them to 3px, 2px, and 1px respectively.

Therefore, we can set the width of the border in this way:

p {border-style: solid; border-width: 5px;}

Or:

p {border-style: solid; border-width: thick;}

Define the width of a single side

You can set the border of each edge of the element in the order of top-right-bottom-left:

p {border-style: solid; border-width: 15px 5px 15px 5px;}

The above example can also be abbreviated as (this writing style is calledValue copy)

p {border-style: solid; border-width: 15px 5px;}

You can also set the width of each border edge separately through the following properties:

Therefore, the following rules are equivalent to the above examples:

p {
  border-style: solid;
  border-top-width: 15px;
  border-right-width: 5px;
  border-bottom-width: 15px;
  border-left-width: 5px;
  }

No border

In the previous examples, you have seen that in order to display a border, you must set the border style, such as solid or outset.

What will happen if the border-style is set to none?

p {border-style: none; border-width: 50px;}

Although the border width is 50px, the border style is set to none. In this case, not only does the border style disappear, but its width also becomes 0. The border disappears, why?

This is because if the border style is none, i.e., the border does not exist at all, then the border cannot have width, so the border width is automatically set to 0, regardless of what you originally defined.

It is very important to remember this. In fact, forgetting to declare the border style is a common mistake. According to the following rules, all h1 elements will have no border, let alone 20 pixels wide:

h1 {border-width: 20px;}

Since the default value of border-style is none, if no style is declared, it is equivalent to border-style: none.Therefore, if you want the border to appear, you must declare a border style.

border color

Setting the border color is very simple. CSS uses a simple border-color property, it can accept up to 4 color values at a time.

You can use any type of color value, such as named colors, hexadecimal, and RGB values:

p {
  border-style: solid;
  border-color: blue rgb(25%,35%,45%) #909090 red;
  }

If the color value is less than 4, value repetition will take effect. For example, the following rule declares that the top and bottom borders of the paragraph are blue, and the left and right borders are red:

p {
  border-style: solid;
  border-color: blue red;
  }

Note:The default border color is the foreground color of the element itself. If no color is declared for the border, it will be the same as the text color of the element. On the other hand, if the element has no text, assuming it is a table that only contains images, then the border color of the table is the text color of its parent element (because color can be inherited). This parent element is likely to be body, div, or another table.

Define single-side color

There are also some single-side border color properties. Their principle is the same as that of single-side style and width properties:

To specify a solid black border for the h1 element and a solid red right border, you can specify it as follows:

h1 {
  border-style: solid;
  border-color: black;
  border-right-color: red;
  }

Transparent border

We mentioned earlier that if there is no border style, there is no width. However, there may be cases where you want to create an invisible border.

CSS2 introduced the border color value transparent. This value is used to create invisible borders with width. Please see the following example:

<a href="#">AAA</a>
<a href="#">BBB</a>
<a href="#">CCC</a>

We defined the following styles for the above links:

a:link, a:visited {
  border-style: solid;
  border-width: 5px;
  border-color: transparent;
  }
a:hover {border-color: gray;}

Try It Yourself

In a sense, using transparent, borders act like additional padding; there is also an advantage that you can make them visible when needed. This transparent border is equivalent to padding because the element's background extends into the border area (if there is a visible background).

Important Note:Before IE7, IE/WIN did not support transparent. In previous versions, IE would set the border color based on the element's color value.

CSS Border Example:

All border properties in one declaration
This example demonstrates how to set all four border properties in a single declaration using shorthand attributes.
Set the style of all four borders
This example demonstrates how to set the style of all four borders.
Set different borders on each side
This example demonstrates how to set different borders on each side of an element.
All border width properties in one declaration
This example demonstrates how to set all border width properties in a single declaration using shorthand attributes.
Set the color of all four borders
This example demonstrates how to set the color of all four borders. You can set one to four colors.
All bottom border properties in one declaration
This example demonstrates how to set all bottom border properties in a single declaration using shorthand attributes.
Set the color of the bottom border
This example demonstrates how to set the color of the bottom border.
Set the style of the bottom border
This example demonstrates how to set the style of the bottom border.
Set the width of the bottom border
This example demonstrates how to set the width of the bottom border.
All left border properties in one declaration
All left border properties in one declaration
Set the color of the left border
This example demonstrates how to set the color of the left border.
Set the style of the left border
This example demonstrates how to set the style of the left border.
Set the width of the left border
This example demonstrates how to set the width of the left border.
All right border properties in one declaration
This example demonstrates a shorthand attribute used to set all right border properties in one declaration.
Set the color of the right border
This example demonstrates how to set the color of the right border.
Set the style of the right border
This example demonstrates how to set the style of the right border.
Set the width of the right border
This example demonstrates how to set the width of the right border.
All top border properties in one declaration
This example demonstrates how to set all top border properties in a single declaration using shorthand attributes.
Set the color of the top border
This example demonstrates how to set the color of the top border.
Set the style of the top border
This example demonstrates how to set the style of the top border.
Set the width of the top border
This example demonstrates how to set the width of the top border.

CSS Border Properties

Property Description
border Abbreviated property, used to set the properties for all four sides in a single declaration.
border-style Used to set the style of all borders of the element, or to set the border style separately for each side.
border-width Abbreviated property, used to set the width of all borders of the element, or to set the width separately for each side border.
border-color Abbreviated property, used to set the color of the visible parts of all borders of the element, or to set colors separately for each of the 4 sides.
border-bottom Abbreviated property, used to set all the properties of the bottom border in a single declaration.
border-bottom-color Set the color of the bottom border of the element.
border-bottom-style Set the style of the bottom border of the element.
border-bottom-width Set the width of the bottom border of the element.
border-left Abbreviated property, used to set all the properties of the left border in a single declaration.
border-left-color Set the color of the left border of the element.
border-left-style Set the style of the left border of the element.
border-left-width Set the width of the left border of the element.
border-right Abbreviated property, used to set all the properties of the right border in a single declaration.
border-right-color Set the color of the right border of the element.
border-right-style Set the style of the right border of the element.
border-right-width Set the width of the right border of the element.
border-top Abbreviated property, used to set all the properties of the top border in a single declaration.
border-top-color Set the color of the top border of the element.
border-top-style Set the style of the top border of the element.
border-top-width Set the width of the top border of the element.