Rounded boxes with CSS3 multiple background images

Before CSS3, if you wanted to achieve the effect of a box with rounded corners, you had to write a markup like this:

<div id="box">
  <div id="box-top-right">
    <div id="box-bottom-left">
   <div id="box-content">
   </div>
  </div>
  </div>
</div>

with the following styles:

#box {
  width: 250px;
  background: #d16c00 url("img/topleft.gif") no-repeat 0 0;
  color: #fff;
}

#box #box-top-right {
    background: transparent url("img/topright.gif") no-repeat 100% 0;
}

#box #box-bottom-left {
  background: transparent url("img/bottomleft.gif") no-repeat 0 100%;
}
#box #box-content {
background: transparent url("img/bottomright.gif") no-repeat 100% 100%;
padding: 10px;
}

You can see the result here. Of course all this markup is rather redundant and non-semantical. CSS3 makes life a lot simpler by allowing an element to get multiple background images. To begin, all the markup now needed is simply this:

 <div id="box"></div>

Then we add a single CSS rule:

#box {
  width: 240px;
  background-color: #d16c00;
  background-image: url("img/topleft.gif"), url("img/topright.gif"), url("img/bottomleft.gif"), url("img/bottomright.gif");
  background-repeat: no-repeat;
  background-position: 0 0, 100% 0,  0 100%, 100% 100%;
  color: #fff;
  padding: 10px;
}

As you can see, the background-image and background-position properties now accept up to four values, so that we can add and position four different background images. You can see the final result here.