CSS border with 9 demos for different HTML elements

Purpose of CSS border

The border property is used to set the border or lining of the specified HTML elements like div, paragraphs, lists, tables etc.

Ways to use border property

You may set border properties in a single declaration or set by using each border property separately.

Similarly, you may set border for different directions (top, left, right and bottom) separately.

By single declaration for all directions:

1	border: solid 1px #fff000;

By using separate property for border:

1 2 3 4 5

border-style: solid;   border-color: #fff000;   border-width: 5px;

 

For each direction separately:

 

Now I will show you a few demos of setting the border of different elements by single and separate declarations for each direction.

Setting a simple border by single declaration of div

Following is a simple example of setting the border of a div element in the single declaration. For that a div with given height and width is created along with border properties as shown below:

See online demo and code

The CSS code for border:

 

Specifying borders for each direction

By using the CSS border property separately, you can set the borders for the top, bottom, left and right each with its own set of properties like border style, width, color.

For the demo, I have used four different border styles for each side:

• Top is using solid with 2-pixel width
• Bottom with dashed style
• Left border is double
• Right border is dotted

While each border is given a different color by using hexadecimal and RGB codes. See the live demo and code by the link below:

See online demo and code

The CSS code for borders used:

 

Adding radius in borders CSS

The CSS3 has introduced a new border property, the border-radius that you can use to add radius in borders. Just like normal border property, you can add border radius by single declaration that will be applied to all corners like this:

border-radius: 15px;

You may also use CSS border radius for each side i.e. top left, top right, bottom left and bottom right separately as this:

 

The following example’s border radius is set by the single declaration that will be applied to all four corners. See the demo by clicking the image or link below:

See online demo and code

The border properties are set as follows:

 

An HTML table border example with CSS

In that demo, the table borders are set by using the CSS border properties. By using the CSS, it allows great flexibility to set not only borders but other table related properties for beautiful styles.

You may set the CSS table border to an overall table and also may style table header and rows independently.

See the following table demo and code by the links below followed by a little description:

See online demo and code

There are many other CSS properties used for styling the table like background, line-height etc. however, this is how the borders are set:

For the table header border, I have used:

 

While, for table data the border CSS properties are used:

 

You may use different border styles, width etc. as the need of the theme of your website.

In the demo, the table header is using the linear-gradient property to set the background (which is not an image).

A CSS table demo with radius border

Just like in div or other elements, you can add border radius in the tables as well. The radius can be set for the overall table, table header or at the table data level.

See the following demo and code:

See online demo and code

In that demo, the table header is given the dotted border style with 5px width while the border-radius property is given the 10px value. The table data, <td>, is given the solid border while border-radius is set with 3px.

Bordering the anchor texts

Border property of CSS can be applied to many elements including the links. Normally, the links are underlined with a solid border line that you can change.

Similarly, you can add the top, left or right borders as well which is generally unlikely to be used in the project. But just in case, you should know how flexible CSS is.

The following anchor texts are styled differently with different border properties.

See online demo and code

Four links are created with four different classes. The borders are set at normal and hover states of all links. You can see dotted, solid, double and dashed border styles at normal states of the links are used.

You should use text-decoration: none; to make default underline hidden e.g.

 

In order to add the borders on top, left or right you can use the relative border property for the links as well.

Setting borders of the blockquote demo

The blockquotes are used to cite references from the other sources like a piece from some other website or someone’s quote.

The following demo is using the CSS properties including border to style blockquote tag.

See online demo and code

You can see the left and right border properties are used along with others. While the border-radius is given as well.

 

Border properties in form field’s example

The final demo in this tutorial is for the form fields. You can add CSS properties along with border in the form fields like text box, textarea, dropdowns, submit buttons etc.

See the following demo:

See online demo and code

In the example, three textboxes, a textarea, and a submit button are used. You can see in the code, the CSS properties used to style this form. Although, other properties complemented incredibly, our topic related to borders are set as follows:

For the text boxes, I used following border properties:

 

The same style is used for the textarea. While for Save/Submit button I used this:

 

That is, it also uses border-radius property.

If you also want to add border radius for the text boxes and textarea, try this in the input, textarea class (in the head section).

 

A little changes in background and border colors. The output will be as follows:

See online demo and code