HTML and CSS Reference
In-Depth Information
Figure 8.9
Two backgrounds
used to simulate
rounded corners.
div {
width: 236px;
padding: 8px;
background: #fff url(images/2_part_corner_bottom.png)
➥
no-repeat bottom;
}
h3 {
margin: -8px -8px 0; /* push back out to edge of
container */
padding: 8px;
min-height: 19px;
background: url(images/2_part_corner_top.png) no-repeat
➥
top;
}
[...]
<div>
<h3>top of box</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing
➥
elit, sed do eiusmod tempor incididunt ut labore et dolore
➥
magna aliqua.</p>
</div>
This method is quite easy to implement and maintain, and the pattern of
having one fixed dimension occurs often in columns, sidebars, and rounded
