The border CSS property is a shorthand property for setting all individual border property values at once: border-width, border-style, and border-color. As with all shorthand properties, any individual value that is not specified is set to its corresponding 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.

border: 1px;
border: 2px dotted;
border: medium dashed green;

It is recommended that you use border when you want to set all border properties to the same value. However, if you need to set different borders with different property values, you will need to use the longhand border-width, border-style, and border-color properties, which each accept up to four values. That lets you set different values for each edge, while border, which only accepts one set of border property values, applies the same values to every side of the element.

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


The border property is specified using one or more of the <br-width>, <br-style>, and <color> values listed below.


Thickness of the border. Defaults to medium if absent. See border-width.
Line style of the border. Defaults to none if absent. See border-style.
Color of the border. Defaults to the value of the element's color property. See border-color.

Formal syntax

<br-width> || <br-style> || <color>

<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>

<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>? ] )

<alpha-value> = <number> | <percentage>
<hue> = <number> | <angle>



<div class="fun-border">Look at my borders.</div>
<p>You can edit the CSS below to experiment with border styles!</p>
<style contenteditable>
  .fun-border {
    border: 2px solid red;


style {
  display: block;
  border: 1px dashed black;



Specification Status Comment
CSS Backgrounds and Borders Module Level 3
The definition of 'border' in that specification.
Candidate Recommendation Removes specific support for transparent, as it is now a valid <color>; this has no practical impact.
Though it cannot be set to a custom value using the shorthand, border now resets 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 Internet Explorer Opera Safari
Basic support 1 Yes 1 4 3.5 1
Feature Android webview Chrome for Android Edge mobile Firefox for Android IE mobile Opera Android iOS Safari
Basic support ? ? Yes 4 ? ? 1

See also

© 2005–2018 Mozilla Developer Network and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.