border
border
The border
CSS property is a shorthand property for setting the individual border property values in a single place in the style sheet. border
can be used to set the values for one or more of: border-width
, border-style
, border-color
-
border: 1px; border: 2px dotted; border: medium dashed green;
Like all shorthand properties, a missing value for one of the longhand properties is set to the corresponding initial value. Also note that border-image
, though not settable using this shorthand, is reset to its initial value, that is, none
- This allows to use border
to reset any border settings set earlier in the cascade- As the W3C intends to preserve this property in future level of the spec, it is recommended to use this method to reset border settings-
Note: While the border-width
, border-style
, and border-color
shorthand properties accept up to four values, allowing one to set different width, style or color values for the different border edges, this property only accepts a single value for each property, leading to the same border for all four edges-
Initial value | as each of the properties of the shorthand:
|
---|---|
Applies to | all elements. It also applies to ::first-letter . |
Inherited | no |
Media | visual |
Computed value | as each of the properties of the shorthand:
|
Animation type | as each of the properties of the shorthand:
|
Canonical order | order of appearance in the formal grammar of the values |
Syntax
The border
property is specified as one or more of the <br-width>
, <br-style>
, and <color>
values listed below.
Values
<br-width>
- Default value
medium
is used if absent. Seeborder-width
. <br-style>
- Default value
none
is used if absent. Seeborder-style
. <color>
- A
<color>
denoting the color of the border- If not set, its default value is the value of the element'scolor
property (the text color, not the background color)- Seeborder-color
-
Formal syntax
<br-width> || <br-style> || <color>where
<br-width> = <length> | thin | medium | thick
<br-style> = none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset
<color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>where
<rgb()> = rgb( [ [ <percentage>{3} | <number>{3} ] [ / <alpha-value> ]? ] | [ [ <percentage>#{3} | <number>#{3} ] , <alpha-value>? ] )
<rgba()> = rgba( [ [ <percentage>{3} | <number>{3} ] [ / <alpha-value> ]? ] | [ [ <percentage>#{3} | <number>#{3} ] , <alpha-value>? ] )
<hsl()> = hsl( [ <hue> <percentage> <percentage> [ / <alpha-value> ]? ] | [ <hue>, <percentage>, <percentage>, <alpha-value>? ] )
<hsla()> = hsla( [ <hue> <percentage> <percentage> [ / <alpha-value> ]? ] | [ <hue>, <percentage>, <percentage>, <alpha-value>? ] )
<named-color> = transparent | aliceblue | antiquewhite | aqua | aquamarine | azure | beige | bisque | black | blanchedalmond | blue | blueviolet | brown | burlywood | cadetblue | chartreuse | chocolate | coral | cornflowerblue | cornsilk | crimson | cyan | darkblue | darkcyan | darkgoldenrod | darkgray | darkgreen | darkgrey | darkkhaki | darkmagenta | darkolivegreen | darkorange | darkorchid | darkred | darksalmon | darkseagreen | darkslateblue | darkslategray | darkslategrey | darkturquoise | darkviolet | deeppink | deepskyblue | dimgray | dimgrey | dodgerblue | firebrick | floralwhite | forestgreen | fuchsia | gainsboro | ghostwhite | gold | goldenrod | gray | green | greenyellow | grey | honeydew | hotpink | indianred | indigo | ivory | khaki | lavender | lavenderblush | lawngreen | lemonchiffon | lightblue | lightcoral | lightcyan | lightgoldenrodyellow | lightgray | lightgreen | lightgrey | lightpink | lightsalmon | lightseagreen | lightskyblue | lightslategray | lightslategrey | lightsteelblue | lightyellow | lime | limegreen | linen | magenta | maroon | mediumaquamarine | mediumblue | mediumorchid | mediumpurple | mediumseagreen | mediumslateblue | mediumspringgreen | mediumturquoise | mediumvioletred | midnightblue | mintcream | mistyrose | moccasin | navajowhite | navy | oldlace | olive | olivedrab | orange | orangered | orchid | palegoldenrod | palegreen | paleturquoise | palevioletred | papayawhip | peachpuff | peru | pink | plum | powderblue | purple | rebeccapurple | red | rosybrown | royalblue | saddlebrown | salmon | sandybrown | seagreen | seashell | sienna | silver | skyblue | slateblue | slategray | slategrey | snow | springgreen | steelblue | tan | teal | thistle | tomato | turquoise | violet | wheat | white | whitesmoke | yellow | yellowgreen
<deprecated-system-color> = ActiveBorder | ActiveCaption | AppWorkspace | Background | ButtonFace | ButtonHighlight | ButtonShadow | ButtonText | CaptionText | GrayText | Highlight | HighlightText | InactiveBorder | InactiveCaption | InactiveCaptionText | InfoBackground | InfoText | Menu | MenuText | Scrollbar | ThreeDDarkShadow | ThreeDFace | ThreeDHighlight | ThreeDLightShadow | ThreeDShadow | Window | WindowFrame | WindowTextwhere
<alpha-value> = <number> | <percentage>
<hue> = <number> | <angle>
Examples
HTML
<div class="brd"> look at my borders </div> <p>you can play with the css below to test properties changes</p> <style contenteditable> .brd { border: 1px solid black;} </style>
CSS
.brd { border: 1px solid black; } style { border: 1px dashed black; display:block; }
Result
Specifications
Specification | Status | Comment |
---|---|---|
CSS Backgrounds and Borders Module Level 3 The definition of 'border' in that specification. | Candidate Recommendation | Technically removes the support for transparent as it is now a valid <color> ; this has no practical influence-Though it cannot be set to another value using the shorthand, border does now reset border-image to its initial value (none )- |
CSS Level 2 (Revision 1) The definition of 'border' in that specification. | Recommendation | Accepts the inherit keyword. Also accepts transparent as a valid color. |
CSS Level 1 The definition of 'border' in that specification. | Recommendation | Initial definition |
Browser compatibility
Feature | Chrome | Edge | Firefox (Gecko) | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|---|
Basic support | 1.0 | (Yes) | 1.0 (1.7 or earlier) | 4.0 | 3.5 | 1.0 (85) |
Feature | Android | Edge | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|---|
Basic support | ? | (Yes) | 1.0 (1.9.2) | ? | ? | 1.0 |
See also
-
border-radius
-related CSS properties:border-top-left-radius
,border-top-right-radius
,border-bottom-right-radius
,border-bottom-left-radius
© 2005–2017 Mozilla Developer Network and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/border