border
Quick Summary for border
The 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 valueas each of the properties of the shorthand:border-width: as each of the properties of the shorthand:border-top-width: mediumborder-right-width: mediumborder-bottom-width: mediumborder-left-width: mediumborder-style: as each of the properties of the shorthand:border-top-style: noneborder-right-style: noneborder-bottom-style: noneborder-left-style: noneborder-color: as each of the properties of the shorthand:border-top-color: currentcolorborder-right-color: currentcolorborder-bottom-color: currentcolorborder-left-color: currentcolor
Applies toall elements. It also applies to ::first-letter.
Inheritedno
Computed valueas 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 hiddenborder-left-width: the absolute length or 0 if border-left-style is none or hiddenborder-right-width: the absolute length or 0 if border-right-style is none or hiddenborder-top-width: the absolute length or 0 if border-top-style is none or hiddenborder-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 typeas 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; } 
Result

Specifications

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

No Items Found.

Add Comment
Type in a Nick Name here
 
Other Categories in CSS
css
Search CSS
Search CSS by entering your search text above.
Welcome

This is my test area for webdev. I keep a collection of code here, mostly for my reference. Also if i find a good link, i usually add it here and then forget about it. more...

Subscribe to weekly updates about things i have added to the site or thought interesting during the last week.

You could also follow me on twitter or not... does anyone even use twitter anymore?

If you found something useful or like my work, you can buy me a coffee here. Mmm Coffee. ☕

❤️👩‍💻🎮

🪦 2000 - 16 Oct 2022 - Boots
Random Quote
A.A. Milne’s Winnie-the-Pooh: “If you live to be a hundred, I want to live to be a hundred minus one day so I never have to live without you.”
A.A. Milne
Random CSS Property

line-break

The line-break CSS property sets how to break lines of Chinese, Japanese, or Korean (CJK) text when working with punctuation and symbols.
line-break css reference