border
Every element on a page is a rectangular box. All the way from the root <html> element to the lowly <i> element. You can apply a border to any of those rectangular boxes with the border property. Here's a classic example of a box with a border:
.box {
width: 200px;
height: 100px;
border: 3px solid red;
background: #eee;
}The above was the shorthand syntax, in the format:
border: <border-width> || <border-style> || <color>It could have been expressed through each individual property:
.box {
border-width: 3px; /* defaults to medium */
border-color: red; /* defaults to color (literally, the color property) */
border-style: solid; /* defaults to none */
}More Information
Related
Browser Support
| Chrome | Safari | Firefox | Opera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| Any | Any | Any | 3.5+ | 4+ | Any | Any |
Any more about borders?
border-radius, …
border-radius is a different property, it is not included in the shorthand
border, but if you are looking for it, you can also find it in the almanac: http://css-tricks.com/almanac/properties/b/border-radius/Hi Chris,
Would like to see the list of available border style properties here. Believe that would be helpful.
Also, you insight/opinion on these styles. I see solid, dotted, dashed frequently but not the others…are they going out of style?…are they being deprecated?
All the best,
John