Mike asks the CSS Guy for recommendations on rounded corners
Mike writes:
I have a request: could you PLEASE tackle the rounded corner issue? I seem to get a request all the time to add some rounded corners to sites and I have looked at at least a dozen different solutions and was never happy. What do you recommend? How do you create rounded corners?
Let's cut to the chase - I have no new or special method for rounded corners. Also, there is no one way that I can recommend, as some methods are better suited than others based on context and need. I have no intention of doing a rundown of every method, but I'd still be happy to share how I've created rounded corners in the past.
Simplest way I know
I've been fortunate enough to work on projects that have only required rounded corners on elements with a fixed width and a solid color (no gradients). That makes it pretty easy for me - I just use a giant gif.
Gif's are relatively light-weight, even big ones if it's a solid color. For this example, I'll create one at a fixed width of 380px, and make it long - 780px. See example.
Then I'll markup my box.
<div class="roundBox">
<p>beautifully-encapsulated paragraph</p>
</div>And give it the background.
.roundBox {
background:transparent url(roundBox.gif) no-repeat top left;
width:340px;
padding:20px;
}Note that the width of my box is set to 340px in the CSS, because I have left and right padding of 20px, totalling the width of my image: 380px.
To get the bottom corners to show up, more markup is needed:
<div class="roundBox">
<p>beautifully-encapsulated paragraph</p>
<div class="boxBottom"></div>
</div>The 'boxBottom' div should be styled to fit at the bottom and stretch to the full 380px.
.roundBox .boxBottom {
background:white url(roundBox.gif) no-repeat bottom left;
font-size:1px;
line-height:1px;
height:14px;
margin:0 -20px -20px -20px;
}And now I've got a rounded corner box that can stretch down pretty far - in this case, 780px.
Other methods I've used (besides... um... tables)
Another way I've made rounded corners is illustrated on this very website, in the upper right-hand corner of the content. It's using the -moz-border-radius-topright, and since it's just a trivial presentational dollop, I couldn't care less than it's mozilla-only.
In the past, I've attempted to use absolutely positioned divs with negative margins to make each corner of a bordered box, but that didn't go well with IE (not even 7), so IE didn't get rounded corners that day. When I redid the project, I used the gif method described above.
Flexible alternative
If dynamic width and height are required, I'd recommend checking out this article.
Comments (15)
Phil Thompson said:
Great tips. You've just made me realise I only need one background image for each rounded corners' top and bottom curves - like a fool I've been cutting out the top and bottom curves as separate images and then applying very similar CSS to yourself.
Your way of using one image saves on download times not to mention time saved in Photoshop.
Thanks!
# November 15, 2007 5:29 AM
Matt Dawson said:
With a few minor tweaks, you should be able to apply the box bottom to the paragraph instead of an empty div. Functionally the same idea, but just that much less markup.
# November 16, 2007 7:19 AM
Jermayn Parker said:
You raise a good point there mate. I always myself have been guilty of rather using smaller images which means more code, more http requests, yet if its just one gif it can be smaller in the long run. Good point and thanks for spelling it out.
# November 18, 2007 7:48 PM
CSS Guy said:
test
# December 11, 2007 9:05 PM
andrej said:
Great standard solution.
However, do you have any suggestions on alternative methods, for example javascript and no images, or rounded corners through mark-up and css?
# December 26, 2007 10:56 AM
Mike (gamebittk) said:
Rounded corners are not too easy to pull off. I like to use SpiffyCorners.com, because they are easy to generate and are 100% pure CSS.
# February 8, 2008 1:18 PM
Arno Gerritsen said:
Thanks for the tips. I'll try to use this way in my next website.
# February 21, 2008 11:09 AM
Alan said:
Hi,
I'm so sorry but your alternative flexible doesn't work on large screen (1920x1600). You've got a blank between left corner and the box.
# March 5, 2008 4:37 PM
Underwater sea plants said:
round corners looks pretty good on the css style!
# April 8, 2008 2:06 AM
Mel said:
Matt Dawson, that's a great idea, but how would you do that?
# April 9, 2008 9:51 AM
Michael said:
@Matt, wouldn't your ".roundcorner p" solution would work in all instances but ones where there were multiple paras were in a roundcorner area?
Am i misssing something there, or just stating the obvious?
@CSS guy Nice/clean solution presented here. Just discovered your site today through back-deleting off of /kotatsu/index.html
I like your efforts, your pay-it-forward attitude, and your way with words. Count me as a new subscriber.
# June 11, 2008 10:20 AM
Christophe said:
Hey, thanks for the great tips! It works really fine...
I'm using your solution but as today I wanted to give the choice to my clients to select the color of the rounded boxes. Does anybody see a solution to use CSS to resolve this problem?
Best regards
Christophe
# June 16, 2008 1:58 AM
Jorge Oliveira said:
Allan,
What I understand from the autor and from CSS usage, is that the solution here using rounded box is for text and small and medium sized image, not for great sized photos.
Certainly there are another way to get rounded corners to be applied to large images, but may need another study.
I am not specialized in web design, although I know Internet since 1988 and used one of the first Mosaic copy v1.0, and begun in HTML in early years. But this is all, until HTML 4.1. Today I use only the Yahoo editor named Yahoo SiteBuilder which is in fact an RTML editor and not purely an HTML WYSIWYG editor. It put much code unecessary fractioned line in the page, forcing us to manually clean the pages.
Since two years ago I am involved in a small simple HTML website for a friend of mine that make wedding invitation cards in IlmA'rtes http://www.ilmartes.com.br , but until today I have not concluded her website. Maybe this year yet we will change it for use a flash log and header, as well as applying CSS to facilitate the life.
But I like web design and always I can I am trying to learn a bit about.
Regards,
Jorge
P.S. If someone like contact write to oliveira_jorge@terra.com.br
# August 18, 2008 9:26 AM
Rich Ruble said:
I've been using a dynamic method for some time now with good success. http://dev.clear-site.net/index.html
It's not perfect, but works across browsers pretty well in almost every situation. It requires no images what-so-ever! The css and html are like this:
**********CSS***********************
.rnd-cell b.rcbottom, b.rctop {display:block;background: #FFFFF;}
.rnd-cell b.rcbottom b, b.rctop b {display:block;height: 1px; overflow: hidden; background-color: #ECE9D8;}
.rnd-cell b.rc1{margin: 0 5px}
.rnd-cell b.rc2{margin: 0 3px}
.rnd-cell b.rc3{margin: 0 2px}
.rnd-cell b.rcbottom b.rc4, b.rctop b.rc4{margin: 0 1px;height: 2px}
*************HTML********************
<div class="rnd-cell">
<b class="rctop">
<b class="r1" />
<b class="r2" />
<b class="r3" />
<b class="r4" />
</b>
</div>
I certainly am not the first to use this technique and I've long forgotten where I first saw it...
-rich
# October 20, 2008 2:30 PM
Rich Ruble said:
The html got parsed... just like it says it will...duh. And pre tag's didn't help on the preview, so replace the parenthesis ( ) below with html < > tags
(b class="rctop")
(b class="rc1" /)
(b class="rc2" /)
(b class="rc3" /)
(b class="rc4" /)
(/b)
Div(s) and conent here... Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do ...
(b class="rcbottom")
(b class="rc4" /)
(b class="rc3" /)
(b class="rc2" /)
(b class="rc1" /)
(/b)
-rich
# October 20, 2008 2:54 PM