Manuales 
border 2p2m16
The border property is a shorthand property used to specify the width, style and color of the top, right, bottom, and left border of a box. gh4f
The border property is a shorthand property for setting the same width, color, and style for all four borders of a box.
Unlike the shorthand padding properties, the border property cannot set different values on the four borders. To do so, one or more of the other border properties must be used.
The border property can accept one, two or three arguments as a value—omitted values are set to their initial values.
The border shorthand also resets border-image has also been reset to allow the new styles to take effect.
Official Syntax 2r1j5a
- Syntax:
border: <line-width> || <line-style> || <color>
- Initial:
0 none currentColor, which is the concatenation of the initial values of the long-hand properties. - Applies To: all elements
- Animatable: The width and color of the border are animatable.
Values 291l5
- <line-width>
-
The width of the element’s border. Refer to the
border-widthproperty entry for a list of possible values. - <line-style>
-
The style of the element’s border. Refer to the
border-styleproperty entry for a list of possible values. - <color>
-
The color of the element’s border. Refer to the
border-colorproperty entry for a list of possible values.
Examples 2t4m6h
The following are all valid border values set on an element.
.element {
border: 1em; /* style and color are set to their initial values */
/* or */
border: solid orange; /* width is set to its initial value (0), which means that no border will be set */
/* or */
border: 1px dotted #eee;
/* or */
border: 5px solid teal;
}
Live Demo 3h4i39
Here is a live demo. Play with the border property to see how it changes the looks of it:
View this demo on the Codrops PlaygroundBrowser f3k20
The property works in all major browsers: Chrome, Firefox, Safari, Opera, IE, and on Android and iOS.