totn CSS

CSS: border property

This CSS tutorial explains how to use the CSS property called border with syntax and examples.

Description

The CSS border property defines the width, line style, and color of the border of a box. It is a shorthand property for setting the border-width, border-style, and border-color CSS properties.

Syntax

The syntax for the border CSS property is:

border: [border-width] border-style [border-color];

Parameters or Arguments

border-width is optional. It is the border width of a box and can be one of the following:
(If border-width is not provided, the default is medium)

Value Description
fixed Fixed value expressed in px, em, ...
div { border: 2px; }
thin Thin border width, which might be 1px or 2px depending on the browser
div { border: thin; }
medium Medium border width, which might be 3px or 4px depending on the browser
div { border: medium; }
thick Thick border width, which might be 5px or 6px depending on the browser
div { border: thick; }

border-style is required. It is the line style of the border of a box and can be one of the following:
(If border-style is not provided, the default is none)

Value Description
none No border (This is the default)
div { border: none; }
solid Single, straight, solid line
div { border: solid; }
dotted Series of dots
div { border: dotted; }
dashed Series of short dashes
div { border: dashed; }
double Two straight lines that total the pixel amount defined by border-width
div { border: double; }
groove Carved effect
div { border: groove; }
ridge 3D appearance where border looks like it is "coming out" (opposite of groove)
div { border: ridge; }
inset Embedded appearance
div { border: inset; }
outset Embossed appearance (opposite of inset)
div { border: outset; }
hidden Border is hidden
div { border: hidden; }
inherit Element will inherit the border-style from its parent element
div { border: inherit; }

border-color is optional. It is the color of the border of a box and can be one of the following:
(If border-color is not provided, the default is the element's CSS color property)

Value Description
#RRGGBB Hexadecimal representation of the border-color
p { border: #FF0000; }
rgb() RGB representation of the border-color
p { border: rgb(255,0,0); }
name Name of the border-color (ie: red, blue, black, white)
p { border: red; }
transparent Border is not displayed but still takes up space on the page
p { border: transparent; }
inherit Element will inherit the border-color from its parent element
p { border: inherit; }

Note

Browser Compatibility

The CSS border property has basic support with the following browsers:

  • Chrome
  • Android
  • Firefox (Gecko)
  • Firefox Mobile (Gecko)
  • Internet Explorer (IE)
  • IE Phone
  • Opera
  • Opera Mobile
  • Safari (WebKit)
  • Safari Mobile

Example

We will discuss the border property below, exploring examples of how to use this property in CSS with the border-width, border-style, and border-color values.

div { border: solid; }

In this CSS border example, we have set the line style of the box to solid.

Next, we'll look at a CSS border example where we provide the border-width, border-style, and border-color values.

div { border: 1px solid black; }

In this CSS border example, we have set the border-width to 1px, the border-style to solid, and the border-color to black.

We could rewrite this example using the hexadecimal value for black as follows:

div { border: 1px solid #000000; }

Or we could rewrite this example using the rgb() value for black as follows:

div { border: 1px solid rgb(0,0,0); }