totn CSS

CSS: border-top property

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

Description

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

Syntax

The syntax for the border-top CSS property is:

border-top: border-top-width border-top-style border-top-color;

Parameters or Arguments

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

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

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

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

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

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

Note

Browser Compatibility

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

For example:

div { border-top: solid; }

In this CSS border-top example, we have set the line style of the top border to solid. You must set the style for the top border or the top border will not appear.

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

div { border-top: 2px solid red; }

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

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

div { border-top: 2px solid #FF0000; }

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

div { border-top: 2px solid rgb(255,0,0); }