If you’ve built, or attempted to build, a “web 2.0” style site, you have no doubt come across the difficulties in creating rounded corners. It’s one of those problems in modern web development that there is no silver bullet for. The solutions for solving it aren’t just many, but they span many different methods. Choosing a method will help you decide what method you want to use. So what methods are there for rounded corners?
What do we want?
In my opinion this is the only true way to go. Rounded corners deal with how the view is displayed, and CSS is what describes that. If only it were that easy. In order to anchor images to elements, you need, well, elements. One of the most common ways is to have your CSS sprinkled with lots of elements, like this:
This is a rounded corner box
Is this the best way? Definitely not, but it’s fast and it could be a lot worse.This works by adding each of the four corner images to those four divs. They’ll all be right on top of each other, so the end result will be a single rounded box with the text “This is a rounded corner box.”. There’s a lot of other approaches that use 4 individual elements to anchor images to that work in this same way. Examples: Guide to Rounded Corners