totn CSS

CSS: border-bottom property

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

Description

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

Syntax

The syntax for the border-bottom CSS property is:

border-bottom: border-bottom-width border-bottom-style border-bottom-color;

Parameters or Arguments

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

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

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

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

border-bottom-color is the color of the bottom border of a box and can be one of the following:

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

Note

Browser Compatibility

The CSS border-bottom 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-bottom property below, exploring examples of how to use this property in CSS.

For example:

div { border-bottom: solid; }

In this CSS border-bottom example, we have set the line style of the bottom border of the <div> tag to solid. You must set the style or the bottom border will not appear.

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

div { border-bottom: 2px solid black; }

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

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

div { border-bottom: 2px solid #000000; }

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

div { border-bottom: 2px solid rgb(0,0,0); }
Share on: