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 border 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 displays 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

borderSets a border around an element.
border-styleSet the style of all four sides of an element’s border.
border-widthSpecifies the width of all four sides of an element’s border.
border-colorSets the color of all four sides of the border.
border-radiusSpecifies a border-radius for all four corners of an element.
border-leftSpecifies element’s left side border.
border-left-styleSets the style of an element’s left border.
border-left-widthSets the width of an element’s left border.
border-left-colorSets the color of the left border.
border-rightSpecifies element’s right border.
border-right-styleSets the style of element’s right border
border-right-widthSets the width of an element’s right border.
border-right-colorSets the color of the right border.
border-topSpecifies element’s bottom border.
border-top-styleSets the style of an element’s top border.
border-top-widthSets the width of an element’s top border.
border-top-colorSets the color of the top border.
border-bottomSpecifies element’s bottom border.
border-bottom-styleSets the style of an element’s bottom border.
border-bottom-widthSets the width of an element’s bottom border.
border-bottom-colorSets the color of the bottom border.
border-radiusIt is a shorthand property to set all four corners border radius at once.
border-top-left-radiusSpecifies a radius for an element’s top-left corner.
border-top-right-radiusSpecifies a radius for an element’s top-right corner.
border-bottom-left-radiusSpecifies a radius for an element’s bottom-left corner.
border-bottom-right-radiusSpecifies a radius for an element’s bottom-right corner.
border-imageSet an image as an element’s border.
border-image-sourceSpecifies the location/source of the image to be used as an element’s border.
border-image-sliceSpecifies how the image should be sliced that is to be used as a border image.
borde-image-widthSpecifies the width of an element’s border image.
border-image-outsetSpecifies how much the border-image area should extend beyond the border-box.
border-image-repeatSpecifies how the sliced images should be tiled and scaled.
border-collapsespecifies whether the two borders of a table-cell should collapse into a single border table-cell or not.