CSS border: 3 Examples to Style Borders in div, table

What is the border property in CSS?

The border properties of CSS allow placing the border(s) around the HTML elements. This is very useful and gives the control to specify the border specifications.

>>See a div border example

You can place the borders in different elements like div, table, lists on the top, bottom, left or right with different colors and widths.

The borders make it quite easier to differentiate among different elements of your web page with different styling that otherwise you had to do by using HTML table/borders or by using the images etc.

Setting borders separately example

You can specify CSS border styles in one declaration by using the border property, for a simple border. Alternatively, you can specify the border properties separately by using the border properties like border-top, border-top-color, border-top-width etc to control border look.

This chapter will explain about common border properties in general with examples along with the links to border properties to their respective chapters that are given on the bottom of this tutorial.

Define border by single declaration

You can simply specify all border styles i.e top, bottom, left, right in the single declaration by using the border property. This allows setting the values for width, style, and color of borders.

This will be applied to all four borders of the specified element. For instance:

border: dotted 4px #00FFHH;

CSS div border example

In the following example, we will set the border of the <div> element by using border CSS property in the single declaration. The first div is set with the dotted style and the second is set with solid style value. The styles of borders are explained in a separate chapter.

CSS border div

Experience this example online

You can see, by the single declaration, you can set border in CSS. The first div is given the dotted border style with 4px border width. Also, the single declaration of the border is applied to the bottom, top, left, and right borders, i.e. All four borders are set by the single specification.

The cool thing about the borders is that you can specify all four border properties separately. See the following section.

How to set bottom, top, left and right border styles separately

In this example, we will set the styles and border color of all four sides separately. Following border properties will be used to specify borders separately:

  1. border-top
  2. border-bottom
  3. border-right
  4. border-left

A div border is set with the top as solid and HEX color, bottom as dashed and HEX color, left as double and color name while the right border as dotted with the RGB color code by using above border properties.

Experience this example online

Table border example using border property

Along with setting the table display settings by inline properties, you can specify the table border in CSS. In this example, the table style including border is styled.

CSS border table

Experience this example online

Important CSS border properties

Following are a few border properties. The linked properties go to its own chapter with detail and examples.