CSS Border

CSS Tutorial  >  Border

In the box model section, we see that in the box model, border is the area just inside the margin and just outside the padding. Unlike padding and margin, where the only thing we can control is the width, the border section offers a lot more flexibility. Below is the list of how border can be customized:

  • Set the border style using the border-style property
  • Set the border color using the border-color property
  • Set the border width using the border-width property
  • Set rounded corners using the border-radius property
  • Set the border image using the border-image property

The CSS border property is a shorthand that defines the style, width, and color of all four borders. If any of the borders has a different color, width, or style, use the properties below to define them individually:

Allowable values for each of the properties above are described in their individual pages. The values that specify style, width, and color can appear in any order. Please note, though, that border-style must be set, otherwise the border does not appear.

Below are some examples of the border property in action:

Example 1

CSS Declaration

border: #0000FF 5px solid;

results in the following:

In Example 1, color, width, and style are all defined in the CSS, and all four borders have the same characteristics.

Example 2

CSS Declaration

border: double 10px;

results in the following:

Notice that in Example 2, we only specified the style and the width. The color is then set to the default color, which is black.

Next: CSS Border-Style

Copyright © 2017   1keydata.com   All Rights Reserved   Privacy Policy   About   Contact