CSS Border

In this tutorial we will learn about CSS border.

In the above image the area colored in yellow is the border for the element highlighted in blue.

border

Border as the name suggests is use to create border for the element. We can change the color, width and style of the border of an element using the border property.

Child element can inherit the border style from parent element.

Border style

We use the border-style property to set the style of the border.

Keywords for border-style are dashed, dotted, double, groove, inset, outset, ridge, solid, and none.

When the border-style property is set to none then no border is shown for the element.

In the following example we have set the border style to solid.

div {
	border-style : solid;
}

Border style all 4 sides

We can set border style of each sides separately using the following properties.

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

In the following example we have set the border style of each sides of the div element having class container.

div.container {
	border-top-style : solid;
	border-right-style : dashed;
	border-bottom-style : double;
	border-left-style : dotted;
}

border style shorthand

We can set the border style of each sides using the following shorthands.

div {
	border-style : solid dashed dotted double;
}

The above rule will set:

• border-top-style = solid
• border-right-style = dashed
• border-bottom-style = dotted
• border-left-style = double

div {
	border-style : solid dashed double;
}

The above rule will set:

• border-top-style = solid
• border-right-style = dashed
• border-bottom-style = double
• border-left-style = dashed

div {
	border-style : solid dashed;
}

The above rule will set:

• border-top-style = solid
• border-right-style = dashed
• border-bottom-style = solid
• border-left-style = dashed

div {
	border-style : dashed;
}

The above rule will set:

• border-top-style = dashed
• border-right-style = dashed
• border-bottom-style = dashed
• border-left-style = dashed

Border width

We use the border-width property to set the width of the border.

The value of border-width will be applied only after the border-style property is defined.

The value of border-width can be in length (px, cm, mm etc.) and any of the following keyword - thin, medium and thick.

In the following example we have set the border width in some of the different formats.

div {
	border-width : 2px;
}

div.blue {
	border-width : thin;
}

div.red {
	border-width : medium;
}

div.green {
	border-width : thick;
}

Border width all 4 sides

We can set border width of each sides separately using the following properties.

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

In the following example we have set the border width of each sides of the div element having class container.

div.container {
	border-top-width : 2px;
	border-right-width : thin;
	border-bottom-width : medium;
	border-left-width : thick;
}

border width shorthand

We can set the border width of each sides using the following shorthands.

div {
	border-width : 1px thin medium thick;
}

The above rule will set:

• border-top-width = 1px
• border-right-width = thin
• border-bottom-width = medium
• border-left-width = thick

div {
	border-width : thin medium thick;
}

The above rule will set:

• border-top-width = thin
• border-right-width = medium
• border-bottom-width = thick
• border-left-width = medium

div {
	border-width : thin thick;
}

The above rule will set:

• border-top-width = thin
• border-right-width = thick
• border-bottom-width = thin
• border-left-width = thick

div {
	border-width : 1px;
}

The above rule will set:

• border-top-width = 1px
• border-right-width = 1px
• border-bottom-width = 1px
• border-left-width = 1px

Border color

We use the border-color property to set the color of the border. The value can be in hex, color name, rgb and rgba format.

In the following example we have set the border color in some of the different formats.

div {
	border-color : #333;
}

div.blue {
	border-color : blue;
}

div.red {
	border-color : rgb(255, 0, 0);
}

div.green {
	border-color : rgba(0, 255, 0, 1);
}

Border color all 4 sides

We can color the border of each sides separately using the following properties.

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

In the following example we have set the border color of each sides of the div element having class container.

div.container {
	border-top-color : red;
	border-right-color : #f00;
	border-bottom-color : rgb(0, 255, 0);
	border-left-color : rgba(0, 0, 255, 1);
}

border color shorthand

We can set the border color of each sides using the following shorthands.

div {
	border-color : red green blue yellow;
}

The above rule will set:

• border-top-color = red
• border-right-color = green
• border-bottom-color = blue
• border-left-color = yellow

div {
	border-color : red yellow blue;
}

The above rule will set:

• border-top-color = red
• border-right-color = yellow
• border-bottom-color = blue
• border-left-color = yellow

div {
	border-color : red blue;
}

The above rule will set:

• border-top-color = red
• border-right-color = blue
• border-bottom-color = red
• border-left-color = blue

div {
	border-color : red;
}

The above rule will set:

• border-top-color = red
• border-right-color = red
• border-bottom-color = red
• border-left-color = red

Shorthand for border

In order to set the border style, width and color we can use the following shorthand.

div {
	border : 1px solid #333;
}

The above rule will set:

• border-width = 1px
• border-style = solid
• border-color = #333

div {
	border-top : 1px solid red;
	border-right : 2px dashed blue;
	border-bottom : 3px dotted green;
	border-left : 4px double black;
}

The above rule will set:

• border-top-width = 1px
• border-top-style = solid
• border-top-color = red

• border-right-width = 2px
• border-right-style = dashed
• border-right-color = blue

• border-bottom-width = 3px
• border-bottom-style = dotted
• border-bottom-color = green

• border-left-width = 4px
• border-left-style = double
• border-left-color = black