CSS Border

CSS

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;
}

This is a sample paragraph.

border style shorthand

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

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

This is a sample paragraph.

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;
}

This is a sample paragraph.

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;
}

This is a sample paragraph.

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;
}

This is a sample paragraph.

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;
}

This is a sample paragraph.

border width shorthand

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

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

This is a sample paragraph.

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;
}

This is a sample paragraph.

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;
}

This is a sample paragraph.

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;
}

This is a sample paragraph.

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);
}

This is a sample paragraph.

border color shorthand

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

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

This is a sample paragraph.

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;
}

This is a sample paragraph.

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;
}

This is a sample paragraph.

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;
}

This is a sample paragraph.

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;
}

This is a sample paragraph.

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;
}

This is a sample paragraph.

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