CSS Shorthand Properties

By Trenton Moss
2008-01-26


CSS borders
Use:

border: 1px black solid

...instead of

border-width: 1px;
border-color: black;
border-style: solid

Use:

border-right: 1px black solid

...instead of

border-right-width: 1px;
border-right-color: black;
border-right-style: solid

(You can substitute right with top, bottom or left.)

The above CSS shorthand rules can be conveniently combined with the shorthand rules used by margin and padding. Take a look at the following box:

These borders can be achieved with the following CSS command:

border: 8px solid #336;
border-left: 10px solid #ccf;
border-top: 10px solid #ccf

You can achieve exactly the same effect by using:

border: 8px solid #336;
border-width: 10px 8px 8px 10px
border-color: #ccf #336 #336 #ccf

Tutorial Pages:
» CSS fonts
» CSS background and lists
» CSS margin and padding
» CSS borders
» Conclusion

Related Tutorials: » Planning Your Stylesheet - The Definitive Guide » Print Stylesheet - The Definitive Guide » Using CSS Selectors to Highlight Unedited Form Fields » An Introduction to CSS » Overlapping tabbed navigation in CSS » Cascading Style Sheets - CSS