CSS Borders

The border property is a shorthand for all the border properties. It defines the color, width and style for all the four sides of an element's border.

Syntax:

border: border-width border-style border-color

Above mentioned is the most commonly used border property format to add borders to your HTML elements. Like we did to this paragraph.

Example:

#red-border {
    border: 1px solid red;
}

But border can be implemented using the properties individually as well. Let's learn about these 3 border properties and how to use them.

Border Style border-style

This property is used to set a border around an element. There are multiple border styles supported like:

• dashed
• dotted
• double
• groove
• hidden
• inset
• none
• outset
• ridge
• solid

This is dashed border

This is dotted border

This is groove border

Example:

#dashed-border {
    border-style: dashed;
}
#dotted-border {
    border-style: dotted;
}
#groove-border {
    border-style: groove;
}

Live Example →

Border Width border-width

This property sets border width in numeric values or by named values of thin, medium or thick. Width of the border can also be adjusted using the independent property border-width

This is a thick dashed border

Example

#dashed-border {
    border-style: dashed;
    border-width: 6px;
}

Live Example →

Border Color border-color:

This property sets the color of the border using a color value. Color value can be a Hexa code, RGB value or a valid color name.

This is a thick dashed red border

Example

#dashed-border {
    border-style: dashed;
    border-width: 6px;
    border-color: red;
}

Live Example →

We can also provide, 4 different color in one border-color rule, to set different color for all 4 sides of the border.

This is a thick dashed colorful border

Example

#dashed-border {
    border-style: dashed;
    border-width: 6px;
    border-color: red blue green yellow;
}

Live Example →

4 different color values, for top, right, bottom and left, in the same order. If you provide 2 different color names, then the first color will be set for top and bottom border and the second color will be set for left and right. Go try it!

This is compatible with CSS1, CSS2 and CSS3 along with following Web Browsers,

• IE 4+
• Firefox 1+
• Opera 3.5+
• Safari 1+
• Chrome 1+

border-collapse

This property determines whether table cells are connected or separate.

Syntax:

border-collapse: collapse | separate | inherit

The default value is separate, each cell has a border with some spacing. If it is set to collapse, there is just one border for the whole element.

This property is mostly used to style a <table>.

border-spacing

This property defines the spacing between the cells in a table. Again, this property is also used with tables in HTML.

Syntax:

border-spacing: non-negative length | inherit

If one length is mentioned, it gives both horizontal and vertical spacing. If explicitly two values are defined, the first value gives horizontal spacing while the second value gives the vertical spacing.

Setting Border on One Side

As we have learned above, we can easily set border around an element using border-style property, change the thickness of the border using the border-width property and give it a color using the border-color property.

Now, we can also use these three properties to set border on any one side as well. All we have to do is append the name of the side in between:

For example: To add border just at the bottom, use the properties border-bottom-style, border-bottom-width, border-bottom-color

I have a dotted border just at the bottom

Example

#dashed-border {
    border-bottom-style: dotted;
    border-bottom-width: 4px;
    border-bottom-color: blue;
}

Live Example →

and the same can be written in a shorthand way as follows:

border-bottom: dotted 4px blue

Similar to border-bottom, border properties can be set individually for top, right and left. For setting the top border, you can use

• border-top (shorthand)
• border-top-width
• border-top-style
• border-top-color

For setting the right border, you can use

• border-right (shorthand)
• border-right-width
• border-right-style
• border-right-color

For setting the left border, you can use

• border-left (shorthand)
• border-left-width
• border-left-style
• border-left-color

Phew! That's a lot of properties. But practice makes a man perfect. Next up is Tables! Good Luck!