Simple Rounded Corners

CSS3 is still a ways out into the future. Sure, you can use some of its features, but if your sites need to be compatible for all modern browsers, you're stuck with CSS2 for the time being.

My most recent project uses a few rounded corners. Since I am using CSS2 and don't want any complicated code, I am using images for these curvy angles. If you read my previous post, you'll know that I'm trying to make my images as small in size as possible.

One solution is to use the sliding doors method. My problem with this is that in some cases, your one image is unnecessarily large, and in other cases, your image may not be large enough (you never know, especially if you work with dynamic content!)

My current project (immsersive-training.net) has boxes that fall into two categories: set height with unknown width, or set width with unknown height. For the boxes with set height, I made two images:

 

Obviously, the top and bottom of the box. For the middle of the box, I just used CSS. It has a set width and a border on the left and right. Pretty simple. My html code looks like this:

<div>
  <div class="header"></div>
  <div class="middle"></div>
  <div class="footer"></div>
</div>

The images are set as the background for the header and footer, and the CSS for the middle section is pretty simple:

.middle {
  border-right: 1px solid #999999;
  border-left: 1px solid #999999;
  width: 196px;
  padding: 8px 15px;
}

This also easily works for background colors other than white.

If your border is a little bit more complicated, then for the middle part I suggest using just a sliver image, and setting it to repeat-y.

Final Product:

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.