13.7. Shorthand Expressions
CSS supports many properties for formatting control over elements. For example, the following properties all apply to borders:
border
border-collapse
border-spacing
border-top
border-right
border-bottom
border-left
border-color
border-top-color
border-right-color
border-bottom-color
border-left-color
border-style
border-top-style
border-right-style
border-bottom-style
border-left-style
border-width
border-top-width
border-right-width
border-bottom-width
border-left-width
Several of these properties can be used to set multiple properties within the same definition. For example, to set an element's border, you could use code similar to the following:
p.bordered { border-top-width: 1px; border-top-style: solid; border-top-color: black; border-right-width: 2px; border-right-style: dashed; border-right-color: red; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: black; border-left-width: 2px; border-left-style: dashed; border-left-color: red; }
Alternately, you could use the shorthand property border-side to shorten this definition considerably:
p.bordered { border-top: 1px solid black; border-right: 2px dashed red; border-bottom: 1px solid black; border-left: 2px dashed red; }
This definition could be further simplified by use of the border property, which sets all sides of an element to the same values:
p.bordered { border: 1px solid black; border-right: 2px dashed red; border-left: 2px dashed red; }
This code first sets all sides to the same values ...
Get Web Standards Programmer's Reference: HTML, CSS, JavaScript®, Perl, Python®, and PHP now with the O’Reilly learning platform.
O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.