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
.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,
Search WWH ::

Custom Search