CSS border Property

The border property adds a border to an element.

Borders can vary in width, line style, and color.

Example

#

Three different border styles.

3px solid steelblue border
5px double lightblue border
3px dashed red border
<style>
  .mydiv {
    padding: 15px;
    margin: 15px 0;
  }
</style>

<div class="mydiv" style="border: 3px solid steelblue">
  3px solid steelblue border
</div>
<div class="mydiv" style="border: 5px double lightblue">
  5px double lightblue border
</div>
<div class="mydiv" style="border: 3px dashed red">
  3px dashed red border
</div>

Using border

The border property is a shorthand for:

If the border-color is not set, it will inherit the text's color.

If the border-width is not set, the default will be set to medium or 1px.

Syntax

border: border-width border-style border-color | 
        initial | inherit;

Values

#

Value Description
border-width Border width. Default is medium (1px).
border-style Border style. Default is none.
border-color Border color. Default will inherit text color.
initial Sets the value to its default value.
inherit Inherits the value from its parent element.

Did you know?

Did you know?

Using an image as border

Instead of a color, an image can also be used to create a border.

A element with an image border.
<style>
  .border-image {
    padding: 20px;
    border: 20px solid transparent;
    border-image: url(/img/css/wheatfield-with-crows.jpg) 100 round;
  }
</style>

<div class="border-image">
  A element with an image border.
</div>

For details on border-image see our CSS border-image Property Reference.


Browser support

This table shows when border support started for each browser.

Chrome
1.0 Dec 2008
Firefox
1.0 Nov 2004
IE/Edge
4.0 Sep 1997
Opera
3.5 Nov 1998
Safari
1.0 Jun 2003

You may also like

Guides