HTML and CSS Reference
In-Depth Information
The border-radius property may also be broken out into longhand properties that al-
low us to change the radii of individual corners of an element. These longhand properties
begin with border , continue with the corner's vertical location ( top or bottom ) and the
corner's horizontal location ( left or right ), and then end with radius . For example,
to change the top-right corner radius of a <div> , the border-top-right-radius
property can be used.
Click here to view code image
1. div {
2. border-top-right—radius: 5px;
3. }
Box Sizing
Until now the box model has been an additive design. If you set the width of an element
to 400 pixels and then add 20 pixels of padding and a border of 10 pixels on every
side, the actual full width of the element becomes 460 pixels. Remember, we need to add
the width , padding , and border property values together to get the actual, full width
of an element.
The box model may, however, be changed to support different calculations. CSS3 intro-
duced the box-sizing property, which allows us to change exactly how the box model
works and how an element's size is calculated. The property accepts three primary val-
ues— content-box , padding-box , and border-box —each of which has a slightly
different impact on how the box size is calculated.
Content Box
The content-box value is the default value, leaving the box model as an additive
design. If we don't use the box-sizing property, this will be the default value for all
elements. The size of an element begins with the width and height properties, and then
any padding , border , or m argin property values are added on from there.
Click here to view code image
1. div {
2. -webkit-box-sizing: content-box;
3. -moz-box-sizing: content-box;
4. box-sizing: content-box;
5. }
Search WWH ::

Custom Search