My two cents on rounded-corner markup

(2009-10-22: This is an old article, I would say deprecated, and you really shouldn’t be doing things this way, with the border-radius property being supported in various forms in most current browsers.)

(2006-04-18: The demo has been updated and expanded upon.)

I need rounded corners for a design I’m working on. A discussion of why I need them is pointless (I know they’re trendy, but in this case they can be considered defining visual elements ;-) ). However, an examination of how to implement them is quite interesting.

The problem

Rounded corners are simple, often (but not always) trivial elements of web design, born perhaps mostly out of the need for variation in content containers on web pages. In certain cases, they can complement an organization’s visual identity. In any case, rounded corners receive far too much attention. Why?

Because they should be simple to implement on web pages, but they’re not. And until CSS3 is supported across browsers (don’t hold your breath, it’ll be a while), designers must resort to hacks and workarounds.

I had specific requirements for my rounded corners:

  • They should work in most browsers
  • The browsers which don’t support them should display regular boxes
  • They should require little or no extra (non-semantic) (X)HTML
  • They should require minimal, elegant CSS
  • They would ideally use one image for all four corners

Now, granted, this is ridiculous. This is way too much thought going into rounded corners, Doc. But hang in there, every solution starts with requirements.

Many great minds have worked on this problem. The Rounded Corners page at css-discuss shows the fruits of their labors. There are brilliant ideas here, and two of them come close to what I want:

  • The minimal HTML-markup in Ryan Thrash’s Simple Rounded Corner CSS Boxes technique (based on Doug Bowman‘s Sliding Doors technique) is nice. Ryan has even managed to give the extra markup some meaning. However, I thought the CSS was somewhat lengthy.
  • Ischa Gast’s Ronde Hoeken is great because of the use of only one image; the CSS is also very minimal. However, the HTML requires four nested

    elements. Ischa’s technique is based on the work of Roger Johannson and Maurice Svay.

I did consider using JavaScript; scripts such as Nifty Corners and Rico did cross my mind, but for my client, I’m hesitant to have a presentational element dependent upon CSS and JavaScript.

The solution

The result of playing around with the ideas of all these talented people: rounded corners, either fixed or flexible, with very little extra HTML, minimal CSS, and the use of only one image. And it works in every browser I’ve checked (be warned: I haven’t checked every version of every browser and haven’t had time to put together a compatibility chart). My client is happy, and why go through all that trouble without writing it up for my 3 subscribers? ;-)

Here’s the HTML:

This is a header

This is the body.

Looks familiar, because the markup is straight from Ryan Thrash. Here’s the CSS:

div.boxhead h2 { 
   background: url("rounded.png") top left no-repeat; 

.boxhead { 
   background: url("rounded.png") top right no-repeat;

.boxbody { 
   background: url("rounded.png") bottom right no-repeat;

.rounded { 
   background: url("rounded.png") bottom left no-repeat;
   width: 30%; /* could be whatever you want, 
   as long as your image is large enough */ 

If that’s not simple, I don’t know what is. rounded.png is a large transparent square with (in this case) white corners. How large you make it will depend on if it’s going to be a fixed or a flexible box, and how large the flexible box can grow. The image can also contain a complete border, as in Ischa’s technique.

Styling the boxes is easy. I would keep the decorative styles in separate classes, just to keep things simple. Let’s add some style:

.boxheaders { 
   padding: .4em 0 0 .6em;
   border-bottom: 1px dotted white;

.centered { margin: 0 auto; }

.boxtext { padding: 0 1em 1em 1em; }

.green { background-color: #a3bf91; }

and now we add these classes to the HTML, which then looks like this:

This is a header

This is the body.

This is the result.

This is so easy it’s scary, and I haven’t come across anything cleaner which meets the above requirements. Have fun with it; I sure had fun figuring this out. Thanks and credit to all the people who’ve spent plenty of hours thinking about this stuff, and whose principles and methods have been applied in this method.

6 thoughts on “My two cents on rounded-corner markup

  1. This is one of the simplest, easiest to manage, and most apprpriate examples for rounded corners that I have seen.

    I have two questions.
    How can your corners have edges that are more smooth?
    How could you give some corners round and some squared?



  2. Richard:

    1. I admittedly did not spend much time attempting to make the corners as smooth as they could be. They probably could be better, but for really smooth corners you’ll either have to use an alpha channel (PNG-24, for which browser support is momentarily insufficient), or use a separate image for each color, anti-aliasing to the specified color in each corner (see the example, I’ve updated it).

    2. To square some corners, simply remove the declarations for those corners. For example, to square (or “un-round” ;-)) the top right corner in the above example, you would remove the declaration for “.boxhead” from the stylesheet (or at least the background property).

    I hope this answers your questions!

  3. Thanks for the great explanation on your approach! Due to my self-taught amateur abilities I have some (hopefully simple) questions that I’m hoping you might be able to assist with…

    My goal is to implement image borders with rounded corners for all of the posts on my WP site – well, at least all of the post that have images (see the site link for more detail). The result will hopefully be close to what they have achieved on the site. Ideally this would formatting of images would occur automatically. Also, Im currently using a customized kubrick theme – the default theme with which WP installs.

    It appears you have approached this by addressing 3 seperate elements; html, css & a single image. I have a few questions on each one:

    When adding the css rules, should this be done in the styles.css file? Since this rule should only to apply as previously stated, is there additional coding that needs to be entered?

    In your method, must the HTML go in each post as desired or could it be placed in one of the templates (which one) to avoid repetition?

    As long as it’s properly referenced, placing the image in the wp_content/images/ should work fine? Given that the images frequently have non-uniform dimensions, would a simple square work successfully?

    Sorry for such trivial questions, but any help you might provide would be greatly appreciated! Thank you.

  4. Joel: To be frank, I haven’t tried this in WP, so I’m not sure what exactly would be involved. I would imagine that you could add the style definitions to the main stylesheet of the theme you’re using, and the HTML to the markup in your post template. It shouldn’t matter where you place the image, as long as it’s referenced correctly from the stylesheet. With CSS, you’ll have to be aware of potential class/id conflicts between the existing CSS and this new code. I don’t expect problems, but knowing your theme stylesheet well will help you solve any problems you might have,

    The WordPress Codex could probably tell you most of what you’d need to know. Good luck with it!

  5. I realize that this is an old article but I have to thank you. I’ve been working on getting rounded corners for many hours now and haven’t been able to. This is the first technique I’ve found that worked fairly easily in my situation. I had to do a little tweaking (probably due to my poor CSS hacking) but everything fell together very quickly.

Comments are closed.