CSS Rounded Borders

Here is one method of creating boxes with rounded corners / borders using CSS, without using the border-radius capabilities of CSS 5 (so it will work on older browsers).

Features

  • Fluid / liquid i.e. allows unlimited expansion horizontally and vertically.
  • Supports transparency.

Tested on the following browsers

  • IE 6 and 7.
  • Firefox 3.5.
  • Chrome 4 and 5.
  • Safari 4.

Those browsers were on Windows (XP and Vista), Mac (OSX) and Linux (gentoo, not that is makes any difference), as appropriate.

A hybrid approach

The method is a hybrid of the following two approaches:

My hybrid approach handles both of those issues.

The code

The HTML:

  <div class="rounded">
    <div class="top"><div class="topleft"></div><div class="topcentre"></div><div class="topright"></div></div>
      <div class="centre">
        <p>CSS rounded borders example</p>
      </div>
    <div class="bottom"><div class="bottomleft"></div><div class="bottomcentre"></div><div class="bottomright"></div></div>
  </div>

The CSS:

body {
 background: #7c7c7c;
}
.rounded .top,
.rounded .bottom {
 position: relative; /* Relative positioning allows child divs to be absolutely positioned relative to parent. */
 height: 7px; /* Necessary for IE6 to trigger hasLayout and prevent contained divs hanging to right. */
 overflow: hidden; /* Necessary for IE6 to give correct height. */
}
.rounded .topcentre,
.rounded .topleft,
.rounded .topright,
.rounded .bottomcentre,
.rounded .bottomleft,
.rounded .bottomright {
 height: 7px;
}
.rounded .topleft,
.rounded .topright,
.rounded .bottomleft,
.rounded .bottomright {
 background-repeat: no-repeat;
 position:absolute; /* Absolute positioning allows divs to sit side by side */
 left:0px;
 top:0px;
}
.rounded .topleft,
.rounded .bottomleft {
 background-position: top left;
 width: 7px;
}
.rounded .topright,
.rounded .bottomright {
 background-position: top right;
 width: 100%;
}
.rounded .topleft {
 background-image: url('tl.png');
}
.rounded .topright {
 background-image: url('tr.png');
}
.rounded .topcentre,
.rounded .bottomcentre {
 background-image: url('c.png');
 background-repeat: repeat;
 margin-left: 7px;
 margin-right: 7px;
}
.rounded .bottomleft {
 background-image: url('bl.png');
}
.rounded .bottomright {
 background-image: url('br.png');
}
.rounded .centre {
 padding: 3px 10px 3px 10px;
 background: url('c.png');
}
.rounded .centre p {
  margin: 0; /* Margin in the centre content could break apart the rounded borders in IE. */
}

We need 5 images to create the rounded borders:

  • Top left: Top left
  • Top right: Top right
  • Centre (yes, there is an image here, it just happens to be tiny and white!): Centre
  • Bottom right: Bottom right
  • Botton left: Bottom left

Working example

Here is a working example using the above code: CSS rounded borders example.

Last modified: 23/04/2015 Tags:

This website is a personal resource. Nothing here is guaranteed correct or complete, so use at your own risk and try not to delete the Internet. -Stephan

Site Info

Privacy policy

Go to top