CSS Borders

CSS border properties are used to set a border around an element. These border properties provide us full control to specify border style, color, width, radius, and much more.

In this CSS tutorial, we will learn how to set different kinds of borders around elements and discuss all these border properties in detail.

I have a rounded border.

I have a blue color left border.

CSS Border Style

CSS border-style property allows you to specify the style of the border such as ‘solid’, ‘dashed’, ‘dotted’, etc. Try out the example below:

Example:

h1{
   border-style: solid;
}
h2{
  border-style: dashed;
}
p{
  border-style: dotted;
}

CSS has several built-in border styles. You can use any of them. These styles are listed below:

• solid – Specifies a solid border.
• dashed – Specifies a dashed border.
• dotted – Specifies a dotted border.
• double – Specifies a double border.
• grove – Specifies a 3D groove border.
• ridge – Specifies a 3D ridge border.
• inset – Specifies a 3D inset border.
• outset – Specifies a 3D outset border.
• none – Specifies no border.
• hidden – Specifies a hidden border.

Try out the below example to see how each of the above borders looks:

Example:

p.solid { border-style: solid; }
p.dashed{ border-style: dashed; }
p.dotted{ border-style: dotted; }
p.double{ border-style: double; }
p.groove{ border-style: groove; }
p.ridge{ border-style: ridge; }
p.inset{ border-style: inset; }
p.outset{ border-style: outset; }

Note: The none and hidden values display no border. none is the default value of the border-style property.

CSS Border Width

CSS border-width property specifies the thickness of the border.

The border width can be specified using inbuilt keywords like: ‘thin’, ‘thick’, ‘medium’, etc. or it can be specified using any valid CSS length format such as ‘px’, ’em’, ‘rem’, ‘cm’, etc.

Percentage values are not allowed.

Example:

p.thin{
   border-width: thin;
}

p.thick{
   border-width: thick;
}

p.medium{
   border-width: medium;
}

p.manual{
   border-width: 10px;
}

CSS Border Color

CSS border-color property specifies the color of the border.

Example:

h1{
  border-style: solid;
  border-width: medium;
  border-color: blue;
}

The border-color property can accept any of the following color formats:

• Any color name – like ‘red’, ‘green’, ‘blue’
• Hex color format – like ‘#f1f1f2’, ‘#c2f100’
• RGB format – like ‘rgb(255,0,0)’
• HSL format – like ‘hsl(10%, 10%, 50%)’

Try out the example below to see the implementation:

Example:

h1{
   border-style: solid;
   border-color: #ff0000;
}
h2{
   border-style: solid;
   border-color: rgb(50, 168, 155);
}
p{
   border-style: solid;
   border-color: hsl(321, 81%, 52%);
}

CSS Border Sides

Till now, we have specified borders for all four sides. But, it is also possible to set border for an individual side.

In the example below, we have set a different border for each individual side of the element. Try it out:

Example:

h1{
   border-top-style: dashed;
   border-right-style: outset;
   border-bottom-style: dotted;
   border-left-style: solid;
}

All the individual border side properties can also be combined into a single property and the result would still be the same. Refer to the example below:

Example:

h1{
   border-style: dashed outset dotted solid;
}

But how does the above combined code works?

Here is the explanation-

If the border-style property has four values:

• border-style: val1 val2 val3 val4;
  • The top border will use val1
  • The right border will use val2
  • The bottom border will use val3
  • The left border will use val4

If the border-style property has three values:

• border-style: val1 val2 val3;
  • The top border will use val1
  • The right and left border will use val2
  • The bottom border will use val3

If the border-style property has two values:

• border-style: val1 val2;
  • The top and bottom border will use val1
  • The left and right border will use val2

If the border-style property has only one value:

• border-style: val;
  • Each border side will use the same value(val)

See the example below:

Example:

p.four{
   border-style: solid dashed dotted double;
}

p.three{
   border-style: solid dashed dotted;
}

p.two{
   border-style: solid dashed;
}

p.one{
   border-style: solid;
}

Note: All properties which we have discussed so far, can be applied to any individual border side.

CSS Border Radius

CSS border-radius property is used to make an element’s corners rounded.

This is a normal border

This is a rounded border.

The border radius can be specified in any valid CSS length format such as ‘px’, ’em’, ‘rem’, ‘cm’, etc. However, we mostly use pixels to define the border radius.

In the example below, the <h1> element has a border-radius of 5px on each corner side. Try it out:

Example:

h1{
   border-style: solid;
   border-color: red;
   border-radius: 5px;
}

We can also set a different value of border-radius for each individual corner if needed. See the example below:

Example:

h1{
   border-style: solid;
   border-color: red;
   border-top-left-radius: 7px;
   border-top-right-radius: 15px;
   border-bottom-left-radius: 15px;
   border-bottom-right-radius: 7px;
}

CSS Border Shorthand Property

CSS border property is a shorthand of the following three properties:

• border-width
• border-style
• border-color

Example:

h1{
   border: 5px solid red;
}

The same shorthand property can also be used to specify border for any individual side. See the example below:

Example:

h1{
  border-left: 5px solid blue;
  border-right: 5px solid red;
  background: yellow;
}
p{
  border-bottom: 5px solid blue;
  background: yellow;
}

All Border Properties