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.
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.
1.
div {
2.
-webkit-box-sizing: content-box;
3.
-moz-box-sizing: content-box;
4.
box-sizing: content-box;
5.
}
Search WWH ::
Custom Search