HTML and CSS Reference
In-Depth Information
Notice the new property being used:
border-radius
. The
border-radius
property is
a shorthand property that can accept up to four values. The values represent (in order,) the
top-left
,
top-right
,
bottom-right
, and
bottom-left
corners. As is the case
with any shorthand properties that use unit values, any omitted values are inherited from ex-
isting ones. See the section in
Chapter 2
on shorthand for a review of how this works.
You can explicitly target individual corners of an element using the longhand syntax. For ex-
ample, the following would be equivalent to the
border-radius
declaration that we just
used:
.media img {
border-top-left-radius: 20%;
border-top-right-radius: 20%;
border-bottom-right-radius: 20%;
border-bottom-left-radius: 20%;
}
You can see clearly why, in most cases, you'll use the shorthand syntax. Even if you want to
target a single corner, it's much more efficient to do this instead:
.media img {
border-radius: 20% 0 0 0;
}
As mentioned above, our original design doesn't use any rounded corners, so we won't em-
ploy this technique here. That said, it's a good weapon to have in your arsenal.
Values and Units
So far in the topic, we've used a number of different types of values and units. Some have
been straightforward while others may have looked confusing at first glance. Since values
and units are an important part of CSS, it's a good time to pause here and explore this topic
in a little more depth.
Probably the simplest way to understand these concepts is to see some examples of the most
common types of values and units, along with brief description of each. In these examples,
