Manuales 
border 4n6i55
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. 1t4a2r
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 4j1l4a
- 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 4w6m73
- <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 3y6d6i
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 176n59
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 s162l
The property works in all major browsers: Chrome, Firefox, Safari, Opera, IE, and on Android and iOS.