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
- When using the border-top property, you can provide one or all of the values (border-top-width, border-top-style, and border-top-width values) and they can be provided in any order.
- You must provide a value for the border-top-style for the top border to appear.
- See also the border-top-color, border-top-style, and border-top-width properties.
- Need to convert your color value to a different representation? Try this online tool to convert your color value between hexadecimal and RGB.
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); }
Advertisements