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
- The border-width value is optional. If it is not provided, the border-width will default to medium.
- The border-color value is optional. If it is not provided, the border-color will default to the element's CSS color property.
- The border-style value is required. If it is not provided, the border-style will default to none and therefore, the border will not appear.
- See also the border-color, border-style, and border-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 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); }
Advertisements