Thursday, April 23, 2009

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.

round_corner_dashed_div
Here is the PNG Circle image used to make round corners:dashed_circle 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>

1 comment:

Thanks a lot for your valuable comments :)