CSS Border Properties

CSS allows you to set styles for the border of any HTML element. It also provides you with a way of setting border styles for one or more sides of an element.

The following examples demonstrate the various CSS properties you can use to apply styles to the border of any HTML element.

Setting Borders on all Sides

To set border styles for all sides of an element, you use the border-width, border-style, and border-color properties. You can also use the border property to set all properties at once.

`border-width`, `border-style`, and `border-color`

View Output

The `border` Property

The border property is shorthand for setting border-width, border-style, and border-color.

View Output

Border Styles

Borders can have the following styles.

<!DOCTYPE html>
<title>Example</title>
<style>
  div {
    padding: 5px;
    margin: 10px;
    text-align: center;
    border-color: orange;
    border-width: 4px;
  }
  .solid {
    border-style: solid;
  }
  .dotted {
    border-style: dotted;
  }
  .dashed {
    border-style: dashed;
  }
  .double {
    border-style: double;
  }
  .groove {
    border-style: groove;
  }
  .ridge {
    border-style: ridge;
  }
  .inset {
    border-style: inset;
  }
  .outset {
    border-style: outset;
  }
  .hidden {
    border-style: hidden;
  }
</style>

<div class="solid">This 'div' has a border style of 'solid'.</div>
<div class="dotted">This 'div' has a border style of 'dotted'.</div>
<div class="dashed">This 'div' has a border style of 'dashed'.</div>
<div class="double">This 'div' has a border style of 'double'.</div>
<div class="groove">This 'div' has a border style of 'groove'.</div>
<div class="ridge">This 'div' has a border style of 'ridge'.</div>
<div class="inset">This 'div' has a border style of 'inset'.</div>
<div class="outset">This 'div' has a border style of 'outset'.</div>
<div class="hidden">This 'div' has a border style of 'hidden'.</div>

View Output

Setting Borders for Each Side

If you don't want the border settings to be applied to all four sides, or if you want each side to have different styles applied, you can use the following properties:

Explicit Properties

Example:

View Output

Shorthand Properties

The following properties provide you with a more concise way of specifying border properties for each side.

Example:

View Output

Border Radius

You can give your borders rounded corners by using the border-radius property.

View Output

CSS Border Properties

Setting Borders on all Sides

border-width, border-style, and border-color

The border Property

Border Styles

Setting Borders for Each Side

Explicit Properties

Shorthand Properties

Border Radius

`border-width`, `border-style`, and `border-color`

The `border` Property