HTML and CSS Reference
In-Depth Information
Figure 8.8
One background
used to simulate
rounded corners.
a.button {
display: block;
width: 150px;
height: 20px;
padding: 2px 8px;
text-align: center;
color: #fff;
background: #666 url(images/1_part_corner.png) no-repeat;
}
a.button:hover,
a.button:active {
color: #00f;
}
[...]
<a class="button">fixed size button</a>
One Fixed Edge
If a block has one side that is a fixed length but one that expands or
contracts based on the space in the layout or the amount of content in
it, then rounding all four corners of that box can be faked with just two
separate background images, as shown in
Figure 8.9
(on the next page).
Usually you can leverage the markup already in the document to attach
these two backgrounds to, but sometimes it may require adding a second
wrapper element or empty element at the beginning or end to offer
the “hook.”
