CSS Border


Borders are a simple concept with a million possibilities. Any element can have a border placed around it, and borders can be placed on all sides, or just the sides you desire. The border property is particularly flexible as each border can be a specific width, color, or style. As a result of the numerous values that can be applied, a greater number of shorthand declarations are available.

Border Properties

The default values are a border with a medium thickness, inheriting the text color of the parent element. Only by applying further values can this default state be influenced. The full list of border properties is

  • border-style
  • border-width
  • border-top-width
  • border-right-width
  • border-bottom-width
  • border-left-width
  • border-color
  • border
  • border-top
  • border-right
  • border-bottom
  • border-left

border-style

The border-style property is used to give any element a border. The browser must first understand the style of border to be drawn before moving on to further border declarations. In other words, the style keyword is declared before the color of the border, for instance.

The property applies a defined style to one, several, or all borders. Keywords for border-style are none, dotted, dashed, solid, double, groove, ridge, inset, and outset.

Example

Welcome to Edututorials.com This is container div

border-width

More specifically, in this section we will look at border-width, border-top-width, border-rightwidth, border-bottom-width, and border-left-width. These properties allow you to define the width of the element’s edges one by one or all at once. Note that for a border-width value to be applied, a border-style must first be declared.

Example

Welcome to Edututorials.com This is container div

border

Using border and the border-top, border-right, border-bottom, and border-left properties allows you to further shorten the given border-style and border-width and border-color values into one property. Let’s look at an example of this shorthand.

Using the CSS from the previous example, again the same border-color, border-style, and border-width values are assigned in that order:

/* Container for centering all our content */
#container {
width: 400px;
margin: 10px auto 10px auto;
padding: 20px;
border-top: #000 thin dashed;
border-right: #999 20px dotted;
border-bottom: #333 medium solid;
border-left: #CCC thick ridge;
}