border
Quick Summary for border
border
shorthand CSS property sets an element's border. It sets the values of border-width
, border-style
, and border-color
.
Code Usage for border
/* style */ border: solid; /* width | style */ border: 2px dotted; /* style | color */ border: outset #f33; /* width | style | color */ border: medium dashed green; /* Global values */ border: inherit; border: initial; border: unset;
More Details for border
border
The border
shorthand CSS property sets an element's border. It sets the values of border-width
, border-style
, and border-color
.
Constituent properties
This property is a shorthand for the following CSS properties:
border-color
border-style
border-width
Syntax
/* style */ border: solid; /* width | style */ border: 2px dotted; /* style | color */ border: outset #f33; /* width | style | color */ border: medium dashed green; /* Global values */ border: inherit; border: initial; border: unset;
The border
property may be specified using one, two, or three of the values listed below. The order of the values does not matter.
Note: The border will be invisible if its style is not defined. This is because the style defaults to none
.
Values
<line-width>
Sets the thickness of the border. Defaults to medium
if absent. See border-width
.
<line-style>
Sets the style of the border. Defaults to none
if absent. See border-style
.
<color>
Sets the color of the border. Defaults to currentcolor
if absent. See border-color
.
Description
As with all shorthand properties, any omitted sub-values will be set to their initial value. Importantly, border
cannot be used to specify a custom value for border-image
, but instead sets it to its initial value, i.e., none
.
The border
shorthand is especially useful when you want all four borders to be the same. To make them different from each other, however, you can use the longhand border-width
, border-style
, and border-color
properties, which accept different values for each side. Alternatively, you can target one border at a time with the physical (e.g., border-top
) and logical (e.g., border-block-start
) border properties.
Borders vs. outlines
Borders and outlines are very similar. However, outlines differ from borders in the following ways:
Outlines never take up space, as they are drawn outside of an element's content. According to the spec, outlines don't have to be rectangular, although they usually are.Formal definition
Initial value | as each of the properties of the shorthand:border-width : as each of the properties of the shorthand:border-top-width : medium border-right-width : medium border-bottom-width : medium border-left-width : medium border-style : as each of the properties of the shorthand:border-top-style : none border-right-style : none border-bottom-style : none border-left-style : none border-color : as each of the properties of the shorthand:border-top-color : currentcolor border-right-color : currentcolor border-bottom-color : currentcolor border-left-color : currentcolor |
---|---|
Applies to | all elements. It also applies to ::first-letter . |
Inherited | no |
Computed value | as each of the properties of the shorthand:border-width : as each of the properties of the shorthand:border-bottom-width : the absolute length or 0 if border-bottom-style is none or hidden border-left-width : the absolute length or 0 if border-left-style is none or hidden border-right-width : the absolute length or 0 if border-right-style is none or hidden border-top-width : the absolute length or 0 if border-top-style is none or hidden border-style : as each of the properties of the shorthand:border-bottom-style : as specifiedborder-left-style : as specifiedborder-right-style : as specifiedborder-top-style : as specifiedborder-color : as each of the properties of the shorthand:border-bottom-color : computed colorborder-left-color : computed colorborder-right-color : computed colorborder-top-color : computed color |
Animation type | as each of the properties of the shorthand:border-color : as each of the properties of the shorthand:border-bottom-color : a colorborder-left-color : a colorborder-right-color : a colorborder-top-color : a colorborder-style : discreteborder-width : as each of the properties of the shorthand:border-bottom-width : a lengthborder-left-width : a lengthborder-right-width : a lengthborder-top-width : a length |
Formal syntax
<line-width> || <line-style> || <color>where
<line-width> = <length> | thin | medium | thick<line-style> = none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset<color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hwb()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>
where
<rgb()> = rgb( <percentage>{3} [ / <alpha-value> ]? ) | rgb( <number>{3} [ / <alpha-value> ]? ) | rgb( <percentage>#{3} , <alpha-value>? ) | rgb( <number>#{3} , <alpha-value>? )<rgba()> = rgba( <percentage>{3} [ / <alpha-value> ]? ) | rgba( <number>{3} [ / <alpha-value> ]? ) | rgba( <percentage>#{3} , <alpha-value>? ) | rgba( <number>#{3} , <alpha-value>? )<hsl()> = hsl( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsl( <hue>, <percentage>, <percentage>, <alpha-value>? )<hsla()> = hsla( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsla( <hue>, <percentage>, <percentage>, <alpha-value>? )<hwb()> = hwb( [<hue> | none] [<percentage> | none] [<percentage> | none] [ / [<alpha-value> | none] ]? )
where
<alpha-value> = <number> | <percentage><hue> = <number> | <angle>
Examples
Setting a pink outset border
HTML<div>I have a border, an outline, and a box shadow! Amazing, isn't it?</div>
CSS div { border: 0.5rem outset pink; outline: 0.5rem solid khaki; box-shadow: 0 0 0 2rem skyblue; border-radius: 12px; font: bold 1rem sans-serif; margin: 2rem; padding: 1rem; outline-offset: 0.5rem; }
ResultSpecifications
Specification |
---|
CSS Backgrounds and Borders Module Level 4 # propdef-border |
See also
border-width
border-style
border-color
Backgrounds and borders Learn CSS: Backgrounds and borders Last modified: Aug 12, 2021, by MDN contributors
Select your preferred language English (US)DeutschEspañolFrançais日本語한국어PolskiРусский中文 (简体)正體中文 (繁體) Change language