Borders
Border
The border shorthand property sets all the border properties in one declaration.
The border
property may be specified using one, two, or three of the values listed below. The order of the value does not matter. See border in MDN for more details.
Note: The border will be invisible if its style is not defined. This is because the style defaults to none
.
Values
<border-color>
Sets the color of the border. Defaults to currentcolor
if absent.
<border-style>
Sets the style of the border. Defaults to none
if absent.
<border-width>
Sets the thickness of the border. Defaults to medium
if absent.
Nonnegative length
If the border is a numeric value defined in the theme, the solid
border style will be applied as a shorthand for the borderWidth
and borderStyle
properties.
borderTop=".0625rem solid"borderTopColor="#8a8a8a"borderLeft=".0625rem solid"borderLeftColor="#8a8a8a"border=".0625rem solid"borderColor="#8a8a8a"borderRight=".0625rem solid"borderRightColor="#8a8a8a"borderBottom=".0625rem solid"borderBottomColor="#8a8a8a"EDITABLE EXAMPLE
Keyword
thin
, medium
, and thick
are keywords that indicate the border width. You can use them in the border
property, but you have to set the borderStyle
property to solid
as well.
Note: Because the specification doesn't define the exact thickness denoted by each keyword, the precise result when using one of them is implementation-specific. Nevertheless, they always follow the pattern thin ≤ medium ≤ thick
, and the values are constant within a single document.
borderTop="thin"borderTopColor="#8a8a8a"borderTopStyle="solid"borderLeft="thin"borderLeftColor="#8a8a8a"borderLeftStyle="solid"border="thin"borderColor="#8a8a8a"borderStyle="solid"borderRight="thin"borderRightColor="#8a8a8a"borderRightStyle="solid"borderBottom="thin"borderBottomColor="#8a8a8a"borderBottomStyle="solid"EDITABLE EXAMPLE
Border Radius
borderRadius="circle"
EDITABLE EXAMPLE
borderRadius="sm"
EDITABLE EXAMPLE
borderRadius="md"
EDITABLE EXAMPLE
borderRadius="lg"
EDITABLE EXAMPLE
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.