Round Cornered div tag with dashed border using CSS

Here is a neat technique to make round cornered div tags using single image. In addition to round corners I have created a dashed border around the div tag. Dashed edges are given using the CSS border style dashed with 1px width. For round corners I have created a PNG image of a circle with dashed border. You can edit this PNG in Photoshop and change the fill color to make your custom colored div tags.

Here is the PNG Circle image used to make round corners: CSS Code:
.container {
    height: auto;
    width: 500px;
}
.top_left {
    background-image: url(dashed_circle.png);
    background-position: left top;
    float: left;
    height: 20px;
    width: 20px;
}
.top_center {
    float: left;
    height: 20px;
    width: 460px;
    border-top-width: 1px;
    border-top-style: dashed;
    border-top-color: #000;
}
.top_right {
    background-image: url(dashed_circle.png);
    background-position: right top;
    float: left;
    height: 20px;
    width: 20px;
}
.center_content {
    height: auto;
    margin-right: 0px;
    margin-left: 0px;
    padding-right: 20px;
    padding-left: 20px;
    clear: both;
    border-right-width: 1px;
    border-left-width: 1px;
    border-right-style: dashed;
    border-left-style: dashed;
    border-right-color: #000;
    border-left-color: #000;
    font-family: Georgia, "Times New Roman", Times, serif;
    font-size: small;
    text-align: justify;
}
.bottom_left {
    background-image: url(dashed_circle.png);
    background-position: left bottom;
    float: left;
    height: 20px;
    width: 20px;
}
.bottom_center {
    float: left;
    height: 20px;
    width: 460px;
    border-bottom-width: 1px;
    border-bottom-style: dashed;
    border-bottom-color: #000;
}
.bottom_right {
    background-image: url(dashed_circle.png);
    background-position: right bottom;
    float: left;
    height: 20px;
    width: 20px;
}

HTML Code:
<div class="container">
  <div class="top_left"></div>
  <div class="top_center"></div>
  <div class="top_right"></div>
  <div class="center_content">Your content goes here.</div>
  <div class="bottom_left"></div>
  <div class="bottom_center"></div>
  <div class="bottom_right"></div>
</div>

Technorati Tags: Round Cornered div tags,dashed border