How To Apply Border Color, Style And Width Using CSS

With CSS border property, you can apply border along with specific color, style and width to any HTML element. In CSS border property you can specify three values for width, style and color. Where width sets all borders in numeric measurement or with a named value of thin, medium and thick. The second value style is used to set the style of the border and is set to a value of dashed, dotted, double, groove, hidden, inset, none, outset, ridge, or solid. The last value color is used to set the color of the border using a CSS color value.

Syntax: border: border-width border-style border-color

Example: p {border: 2px double red;}

Table of Contents

How to Apply Border for Individual Sides

As mentioned on border property you can apply border property for individual sides top, bottom, left and right with specifying values for them. There are border properties for each sides border-top, border-bottom, border-left and border-right respectively. You can specify values of border-width, border-style and border-color for border property of each sides.

Syntax:

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

Example:

#topborder {border-top: thin dashed blue;}
#bottomborder {border-bottom:thick dotted brown;}
#leftborder {border-left: medium groove pink;}
#rightborder {border-right: 2px double red;}

Demo:

See the Pen GJajEo by Shuseel Baral (@shuseel) on CodePen.

How to Set Border Width for Each Sides

In previous we have set border width, style and color for each sides top, bottom, left and right. If you have to apply border width only for those side without style and color, it is possible by using border width property for each sides. There are border width properties for individual sides, which are border-top-width, border-bottom-width, border-left-width and border-right-width. You can specify non-negative length or named value like medium, thick and thin value for each property.

Syntax:

border-top-width: non-negative length | thick| medium | thin | inherit
border-bottom-width: non-negative length | thick| medium | thin | inherit
border-left-width: non-negative length | thick| medium | thin | inherit
border-right-width: non-negative length | thick| medium | thin | inherit

Example:

#topwidth { border-top-width: 2px;border-top-style:solid;}
#bottomwidth {border-bottom-width: thick;border-bottom-style:solid;}
#leftwidth {border-left-width: medium;border-left-style:solid;}
#rightwidth {border-right-width: thin;border-right-style:solid;}

Demo:

See the Pen aOrmyP by Shuseel Baral (@shuseel) on CodePen.

How to Set Border Style for Each Sides

As border width property for individual sides, you can specify border style property for each sides top, bottom, left and right without specifying width and color for individual sides. The border style properties for individual sides are border-top-style, border-bottom-style, border-left-style and border-right-style. You can specify named values like dashed, dotted, double, groove, hidden, inset, outset, ridge and solid along with inherit and none.

Syntax:

border-top-style: dashed | dotted | double | groove | inherit | hidden | inset | none | outset | ridge | solid
border-bottom-style: dashed | dotted | double | groove | inherit | hidden | inset | none | outset | ridge | solid
border-left-style: dashed | dotted | double | groove | inherit | hidden | inset | none | outset | ridge | solid
border-right-style: dashed | dotted | double | groove | inherit | hidden | inset | none | outset | ridge | solid

Example:

#topstyle { border-width: thick; border-top-style:solid;}
#bottomstyle { border-width:thick; border-bottom-style:dashed;}
#leftstyle { border-width:thick; border-left-style:double;}
#rightstyle {border-width:thick; border-right-style:groove;}

Demo:

See the Pen EjzgwG by Shuseel Baral (@shuseel) on CodePen.

How to Apply Border Color for Each Sides

As border style property for individual sides, you can specify border color property for each sides top, bottom, left and right without specifying width and style for individual sides. If you have to apply border color only for those sides, it is possible by using border color property for each sides. There are border color properties for individual sides, which are border-top-color, border-bottom-color, border-left-color and border-right-color. You can specify any valid color value, transparent or inherit for value of each property.

Syntax:

border-top-color: color | transparent | inherit
border-bottom-color: color | transparent | inherit
border-left-color: color | transparent | inherit
border-right-color: color | transparent | inherit

Example:

#topcolor {border-width: thick; border-style:solid; border-top-color: red;}
#bottomcolor {border-width: thick; border-style:solid;border-bottom-color: blue;}
#leftcolor {border-width: thick; border-style:solid;border-left-color:brown;}
#rightcolor {border-width: thick; border-style:solid;border-right-color:green;}

Demo:

See the Pen doEpJb by Shuseel Baral (@shuseel) on CodePen.

How Collapse or Separate Border Spacing

You can make table border connected or separate by using CSS border property border-collapse which defines whether table cell borders are connected or separate. The default value for this property is separate, where each cell having a border with possible spacing. With the value of collapse, the borders appear to collapse on each other so that there is no more spacing between the borders.