Rounded Corners Without Images
May 22nd, 2004 | Published in Code, Essays, Art and Design | 85 Comments
Introduction
Everybody loves rounded corners. A plethora of articles have been written about how to do it, but this is going to be different. This article is going to show you how to make rounded corners without images. That’s right. Without images.
Why would we do such a thing? Here are a few advantages:
- Speed: No images to download, therefore the page is quicker loading and less bandwidth is used.
- Time: Does anyone like the tedious work to make rounded corners, splice them, upload them, etc.? I know I don’t. This saves time and frustration.
- Scalability: One refined, this would allow for easy scaling along with the font size, which image corners do not (normally) do.
- Future: This is the future of rounded corners–well, I think so anyway. Images should only be used when necessary, and if we can eliminate images and still make rounded corners with a decent amount of control, the world is one step closer to being a better place.
- Coolness: Nobody is doing this yet, and it is way cool. Your boss will dig it and your mom will be impressed.
Okay, well maybe not the coolness one. But the rest are pretty good reasons.
Theory
The way this works is really quite simple, but it does take thinking outside of the box (no box model puns here, please). To do this, we use a 20 x 20 square (in pixels) with the background of the page. Secondly, we use a bullet the color of the box. For this example, we are going to use a white background (#FFF) and a grey box (#E6E6E6). I know, those choices were extremely colorful of me.
Let’s Try This Thing
As usual, we will start out with the HTML first. What does it take to code this, you might ask? Well, let me show you. Here is the HTML we will use:
(Note: I am using longer class names to facilitate learning, in a real world environment these could—and probably should—be shortened. Also, sorry about no spaces, my weblog software tried to put p tags there when there are spaces, but look at the example for a little more readable code.)
<div class="rounded-box">
<!-- Corners -->
<div class="top-left-corner">
<div class="top-left-inside">
•
</div>
</div>
<div class="bottom-left-corner">
<div class="bottom-left-inside">
•
</div>
</div>
<div class="top-right-corner">
<div class="top-right-inside">
•
</div>
</div>
<div class="bottom-right-corner">
<div class="bottom-right-inside">
•
</div>
</div>
<!-- Content -->
<div class="box-contents">
Contents go here, but it must be at least
two lines to look any good.
</div> <!-- end div.box-contents -->
</div> <!-- end div.rounded-box -->
Now for the CSS. We are going to start out using pixels, because this needs to be pretty darn precise to work correctly. Ideally it will be in ems eventually.
div.rounded-box {
width: 9em;
background-color: #E6E6E6;
margin: 3px;
}
div.top-left-corner, div.bottom-left-corner,
div.top-right-corner, div.bottom-right-corner
{position:absolute; width:20px; height:20px;
background-color:#FFF; overflow:hidden;}
div.top-left-inside, div.bottom-left-inside,
div.top-right-inside, div.bottom-right-inside
{position:relative; font-size:150px; font-family:arial;
color:#E6E6E6; line-height: 40px;}
div.top-left-corner { top:0px; left:0px; }
div.bottom-left-corner {bottom:0px; left:0px;}
div.top-right-corner {top:0px; right:0px;}
div.bottom-right-corner {bottom: 0px; right:0px;}
div.top-left-inside {left:-8px;}
div.bottom-left-inside {left:-8px; top:-17px;}
div.top-right-inside {left:-25px;}
div.bottom-right-inside {left:-25px; top:-17px;}
div.box-contents {
position: relative; padding: 8px; color:#000;
}
Now we should have a simple rounded box—without those pain-in-the-rear images! Take a look at the example for the finished product!
Concluding Problems
So here is where you come in. I’ve done alot of the ground work. Now you CSS masters need to come in and do your wizardry. Here are some problems or unknowns with my code:
- Even when changed to ems, it doesn’t like it when Gecko-rendering engines resize it. Yet when the font-size is changed in the body css, it scales okay. I haven’t figured this one out.
- When the fonts are chanegd to largest or smallest in IE, a small grey bar appears at the bottom.
- If the content is less than two lines, it don’t look purdy.
- Hasn’t been tested with alot of platforms yet. I’m also not sure how different types of anti-aliasing schemes would affect the corners, but I’m guessing they would.
- My code is desperately screaming to be simplified. I’m sure this could be done easier, and I’m sure someone will figure out how to do it was two lines of CSS. Well, maybe four.
- I have not figured out a way to outline this with a css border. In order to do something like this, another class may have to be added, which would add more complexity to the code.
- Because of the box model, the box contents have to be decently far from the corners because of the span tags. This could be a problem for some people who want these in a tight place. I believe this could be fixed with some playing with position, maybe even making a consession to change the text’s position to absolute.
Credit Where Credit is Due
I know I’m not the first one to think of this. I saw a website around eight or so months ago that did something like this, although the way it was done was pretty inefficient. Unhappily, I’ve lost the link. If anyone knows where this might be, please let me know and I will gratefully link to it.
Edit: Dave Shea pointed out to me some of Literary Moose’s experiments that are a variation of what I am trying to do. I’m going to look at some of his research and see if it will shed some solutions on the problem list.
Next Part
Part 2 of this article will address some of the problems with this version (see Concluding Problems) and show some different techniques that could be done with this (including different corner sizes!).
Update 11/28/06: Well, it’s been almost two years since I’ve written this article, but it is by far the most popular page on this site. There is and will be no part two – I’ve lost interest – but some have refined this method (see comments). I’ve removed the “part 1″ from the title.
Update 01/25/07: Here are some related links:
- Nifty Corners - A more refined method
- Snazzy Borders - Based on "Nifty Corners" but adds a border
- Spiffy Corners - Nice generation tool. Just put in your class name, bg color, and fg color and voila!
May 26th, 2004 at 11:45 am (#)
Josh Sowin
over at Fire and Knowledge has a nice html tutorial on rounded corners sans images but still needs your help. So here is where you come in. I’ve done alot of the ground work. Now you CSS masters need to…
June 3rd, 2004 at 2:01 pm (#)
A lot of pointless extra markup don’t you think? It’s like nested tables all over again.
June 3rd, 2004 at 2:33 pm (#)
Very very nice! I MUST remember this technique, thanx :)
June 3rd, 2004 at 4:16 pm (#)
Nice concept. But like Redpath said, a lot of extra markup. Saving the load time on a 10byte image might be negligible in comparison.
June 3rd, 2004 at 5:16 pm (#)
obviously an image would be easier o use ; but with that being said the markup can be dimmed down a lot. So i wouldnt rule out this tech yet, and when it go’s ‘mainstream’ im sure Dave & Ralph would take full advantage of you’re hard work, nice job.
June 4th, 2004 at 4:46 am (#)
I have a small demo of this on my site
here
and also a demo of rounded tab navigation without graphics or bullets totally resizeable
here
June 4th, 2004 at 8:56 am (#)
It breaks after I increase text size just once. That isn’t good.
June 4th, 2004 at 2:36 pm (#)
I actually didn’t say an image would be “easier to use”. And to be fair, the 10byte image size I mentioned could be upwards of a 1kb.
Why I would prefer using images over this method (at least in it’s current state) is that it can be applied to (mostly) meaningful markup. A header and an anchor for example. My ultimate goal when designing using css is to try my best to not use tags that’s single purpose is to define the look of the content. Am I alwasys successful? Of course not. But it’s what I strive for.
Anyway, I didn’t mean to devalue your hard work in any way. This is great explorarty stuff. I’ll be keeping watch to see how it evolves.
June 4th, 2004 at 9:46 pm (#)
MKDesign has been doing this for ages:
http://www.krikette.com/mkdesign and her older templates are http://geocities.com/morlockkidesign/templates.htm
could that be where you saw it?
June 5th, 2004 at 1:18 pm (#)
In my Opera 7.5, the bullets go on top of the text thus making some of it impossible to read. To fix that, one can add z-index: 1; to definition of div.box-contents.
Just a hint.
June 6th, 2004 at 1:39 pm (#)
Thanks for all the comments and tips everyone! I’m currently working on Part 2 which should fix most of these problems and also simplify the markup. I’m still open to suggestions though, so keep them coming! :)
June 8th, 2004 at 10:28 am (#)
Pretty useless “technique” - it breaks when the text size is increased even a little. But nice try…
June 8th, 2004 at 10:57 am (#)
Interesting hack, but not usable due to many accessibility problems with those unmeaningful •. What will think a blind person when his screenreader arrives at those “bulls”? “hey I’m missing something” “that crappy screenreader!”.
keep it simple.
June 10th, 2004 at 11:27 am (#)
[…] 10/6/2004 Rounded Corners in CSS without images I came across this site with a tutorial on rounded corners using CSS wit […]
June 20th, 2004 at 10:48 am (#)
I actually had this idea 4 years ago, when I was 14 (i’m serious) and CSS was still pretty new. I created an entire page using this method only - no images. However, after I was done, I found a few problems:
first, like other people have mentioned, it breaks when text-size is changed.
second, it has no anti-aliasing and looks rather rough.
third, font-sizes are unreliable across different platforms and browsers. for example, in opera there is just a slightest bump in your current navigation sidebar (above the word ‘about’).
fourth, when a user ’selects all’, the corners will be selected, and this will intefere especially when the user copies and pastes.
fifth, the gains in using text are not noticeable - the extra markup makes up for it, and complicates. the gains in production time are not significant either - i found it much more frustrating to use this method than using images.
carcarlo is also right about accessibility. at the risk of sounding cliched, don’t fix what isn’t broken. but do continue to work on it, maybe you could turn it into something useful!
October 6th, 2004 at 9:49 am (#)
Daily Dose of Development
Rounded Corners Without Images, Part 1 via CSS Vault Resources This is even better than the last one. I started working with the rounded corners using images, and it seems somewhat difficult for me to implement. I’ll try this next….
October 16th, 2004 at 3:10 pm (#)
If you are interested in a maintainable, flexible CSS rounded corner technique that is more practical than avoiding images entirely, check out my article on using PHP/CSS to autogenerate rounded border images: http://hardgrok.org/blog/?postid=20
I am have written (and released freely) a PHP script that dynamically generates corner images of any color set, with basic CSS border styling, anti-aliasing and so on.
If you have a PHP-capable web host, using this technique takes about 30 seconds of setup time to upload “rounded.php”.
Furthermore, there’s no semantic craziness in your XHTML required (well, no more than any rounded corner CSS technique requires), and you still get the benefits of not having to create or maintain a set of chopped images in Photoshop. The bandwidth used by the tiny GIF images generated is truly minimal, and the PHP script tells the browser to cache images (per-parameter set of course) by default. This is cool, but it’s also a practical technique that gives you the benefits of the CSS3 border-radius command without waiting for CSS3!
January 8th, 2005 at 12:33 pm (#)
How’s 2.0 coming along, Josh?
January 28th, 2005 at 11:14 pm (#)
I’ve been looking this tutorial for a long time. Even in meyer web I could not find this tuts. Great job
February 26th, 2005 at 7:13 pm (#)
Hi there, a solution perhaps to getting rid of the line that appears at the bottom. Try putting a couple of
tags after the last text.
February 27th, 2005 at 8:20 am (#)
Actually, that doesnt solve the problem either!
February 27th, 2005 at 10:24 am (#)
Okay this is fun and clever. A new challenge would be how to add borders and possibly shadows. It strikes me that maybe divs stacked on top of each other would be inlvoved somehow
February 28th, 2005 at 11:41 am (#)
I might have a solution for the line at the bottom problem.
I added an overflow:hidden; to both box-contents and rounded-box. I also changed anywhere it said bottom: 0px to bottom: -1px
This seemed to fix the line at the bottom problem for me. I’ve been using this to create a title box, by nesting one inside another with text from a database, so I can’t always just add a couple tags to the end to fix the issue.
The only problem with this solution is that it seams to only work well in IE. In firefox, it actually creates a square corner instead of rounded corner with no indication of the original rounded corner.
February 28th, 2005 at 3:05 pm (#)
Ok, i’ve fixed it for firefox and netscape.
add this above the box-contents div
The width value should be the width of the box minus subtract 40.
remove the overflow: hidden from the box-contents and change the overflow: hidden in the rounded-box to overflow: visible
Also, make sure you keep the bottom: -1px everywhere as noted in my change above.
February 28th, 2005 at 3:06 pm (#)
the div statement didn’t show up in my last post. Here it is again
<div class="bottom-middle" style="position:absolute; width: 160px;
height:20px; background-color:Black; bottom: -1px; right:20px;left:20px"></div>
February 28th, 2005 at 4:02 pm (#)
Very cool! Thanks for working on that!
February 28th, 2005 at 9:01 pm (#)
Thanks. If anyone is interested, here is my php functions for generating a box or a title box. This code doesn’t look as nice as the code at the top because I wanted the flexibility to have different colored boxes on the same page.
function CreateBox($text, $textcolor, $boxcolor, $bgcolor, $width){
%>
<div class="rounded-box" style="position:relative; width: <%=$width%>px;
background-color: <%=$boxcolor%>; margin: 3px;overflow:visible;">
<div class="top-left-corner" style="position:absolute; width:20px; height:20px;
background-color:<%=$bgcolor%>; overflow:hidden; top:0px; left:0px;">
<div class="top-left-inside" style="position:relative; font-size:150px; font-family:arial;
color:<%=$boxcolor%>; line-height: 40px; left:-8px;">•</div></div>
<div class="bottom-left-corner" style="position:absolute; width:20px;
height:20px; background-color:<%=$bgcolor%>; overflow:hidden; bottom:-1px;
left:0px;">
<div class="bottom-left-inside" style="position:relative; font-size:150px; font-family:arial;
color:<%=$boxcolor%>; line-height: 40px; left:-8px;
top:-17px;">•</div></div>
<div class="top-right-corner" style="position:absolute; width:20px; height:20px;
background-color:<%=$bgcolor%>; overflow:hidden; top:0px; right:0px;">
<div class="top-right-inside" style="position:relative; font-size:150px; font-family:arial;
color:<%=$boxcolor%>; line-height: 40px; left:-25px;">•</div></div>
<div class="bottom-right-corner" style="position:absolute; width:20px;
height:20px; background-color:<%=$bgcolor%>; overflow:hidden; bottom: -1px;
right:0px;">
<div class="bottom-right-inside" style="position:relative; font-size:150px;
font-family:arial; color:<%=$boxcolor%>; line-height: 40px; left:-25px;
top:-17px;">•</div></div>
<div class="bottom-middle" style="position:absolute; width: <%=$width-20-20%>px;
height:20px; background-color:<%=$boxcolor%>; bottom: -1px;
right:20px;left:20px"></div>
<div class="box-contents" style="position: relative; padding: 8px; color:<%=$textcolor%>;">
<%=$text%>
</div> <!– end div.box-contents –>
</div> <!– end div.rounded-box –>
<%
}
function CreateTitleBoxTop($title, $text, $titlecolor, $textcolor, $titleboxcolor,
$boxcolor, $bgcolor, $width){
$bordersize = 3; //Minimum of 3px
%>
<div class="rounded-box" style="position:relative; width: <%=$width%>px;
background-color: <%=$titleboxcolor%>; margin: <%=$bordersize%>px;overflow:visible;">
<div class="top-left-corner" style="position:absolute; width:20px; height:20px;
background-color:<%=$bgcolor%>; overflow:hidden; top:0px; left:0px;">
<div class="top-left-inside" style="position:relative; font-size:150px; font-family:arial;
color:<%=$titleboxcolor%>; line-height: 40px; left:-8px;">•</div></div>
<div class="bottom-left-corner" style="position:absolute; width:20px;
height:20px; background-color:<%=$bgcolor%>; overflow:hidden; bottom:-1px;
left:0px;">
<div class="bottom-left-inside" style="position:relative; font-size:150px; font-family:arial;
color:<%=$titleboxcolor%>; line-height: 40px; left:-8px;
top:-17px;">•</div></div>
<div class="top-right-corner" style="position:absolute; width:20px; height:20px;
background-color:<%=$bgcolor%>; overflow:hidden; top:0px; right:0px;">
<div class="top-right-inside" style="position:relative; font-size:150px; font-family:arial;
color:<%=$titleboxcolor%>; line-height: 40px; left:-25px;">•</div></div>
<div class="bottom-right-corner" style="position:absolute; width:20px;
height:20px; background-color:<%=$bgcolor%>; overflow:hidden; bottom: -1px;
right:0px;">
<div class="bottom-right-inside" style="position:relative; font-size:150px;
font-family:arial; color:<%=$titleboxcolor%>; line-height: 40px; left:-25px;
top:-17px;">•</div></div>
<div class="bottom-middle" style="position:absolute; width: <%=$width-20-20%>px;
height:20px; background-color:<%=$titleboxcolor%>; bottom: -1px;
right:20px;left:20px"></div>
<div class="box-contents" style="position: relative; padding: <%=$bordersize%>px;
color:<%=$titlecolor%>;">
<%=$title%>
<div class="rounded-box" style="position:relative; width: <%=$width-$bordersize*4%>px;
background-color: <%=$boxcolor%>; margin: <%=$bordersize%>px;overflow:visible;">
<%if (strlen($title) <= 0){%>
<div class="top-left-corner" style="position:absolute; width:20px; height:20px;
background-color:<%=$titleboxcolor%>; overflow:hidden; top:0px; left:0px;">
<div class="top-left-inside" style="position:relative; font-size:150px; font-family:arial;
color:<%=$boxcolor%>; line-height: 40px; left:-8px;">•</div></div>
<%}%>
<div class="bottom-left-corner" style="position:absolute; width:20px;
height:20px; background-color:<%=$titleboxcolor%>; overflow:hidden; bottom:-1px;
left:0px;">
<div class="bottom-left-inside" style="position:relative; font-size:150px; font-family:arial;
color:<%=$boxcolor%>; line-height: 40px; left:-8px;
top:-17px;">•</div></div>
<%if (strlen($title) <= 0){%>
<div class="top-right-corner" style="position:absolute; width:20px; height:20px;
background-color:<%=$titleboxcolor%>; overflow:hidden; top:0px; right:0px;">
<div class="top-right-inside" style="position:relative; font-size:150px; font-family:arial;
color:<%=$boxcolor%>; line-height: 40px; left:-25px;">•</div></div>
<%}%>
<div class="bottom-right-corner" style="position:absolute; width:20px;
height:20px; background-color:<%=$titleboxcolor%>; overflow:hidden; bottom:
-1px; right:0px;">
<div class="bottom-right-inside" style="position:relative; font-size:150px;
font-family:arial; color:<%=$boxcolor%>; line-height: 40px; left:-25px;
top:-17px;">•</div></div>
<div class="bottom-middle" style="position:absolute; width:
<%=$width-20-20-$bordersize*4%>px; height:20px; background-color:<%=$boxcolor%>;
bottom: -1px; right:20px;left:20px"></div>
<div class="box-contents" style="position: relative; padding: 8px; color:<%=$textcolor%>;">
<%=$text%>
</div> <!– end div.box-contents –>
</div> <!– end div.box-contents –>
</div> <!– end div.rounded-box –>
</div> <!– end div.rounded-box –>
<%
}
August 17th, 2005 at 12:45 pm (#)
Just another Example. Here is a full website that uses the nested rounded corner boxes (TitleBox code from above).
http://eclecticthreads.thelineberrys.com
August 17th, 2005 at 8:41 pm (#)
Hey, great job. But curiously, it doesn’t work on my firefox (Ubuntu system) : http://raynald.ouvaton.org/special/Capture-4.png
It works on firefox on windows… I don’t understand why.
Thanks for your job.
August 31st, 2005 at 8:49 pm (#)
Ok, there’s no more trouble with these corners :
the problem was that I didn’t install the arial font on my system. Now it works : http://raynald.ouvaton.org/special/Capture.png
September 2nd, 2005 at 9:07 am (#)
There is Nifty Corners doing this quite a time already. Did someone mention this already?
September 2nd, 2005 at 9:12 am (#)
FYI: His article was written after mine, and makes uses of Javascript, which my script does not.
September 2nd, 2005 at 10:10 am (#)
Josh: Ah sorry, didn’t see that your article is from 2004.. thought it was new as it just popped up in delicious today.. :-) Then the credit goes to you..
September 7th, 2005 at 5:15 am (#)
Good option! Its not working for me when using Html tags embedded in ASP.NET page.
September 13th, 2005 at 5:39 am (#)
Experimenting: some little modifications and “curious” result with the doctype declaration in MSIE :-D
http://piezas.f2o.org/downloads/prueba.html
December 8th, 2005 at 8:14 pm (#)
Very nice option. I will use it.
Thank you.
December 18th, 2005 at 8:08 am (#)
Font BUG :) (by Raynald)
Try in Firefox ctrl++++ (font-size +4)
Try in Explorer View - fontsize - bigger
Interesting is:
kulate rohy - before / after
http://virtuelvis.com/gallery/css/rounded/
http://www.w3.org/Style/Examples/007/roundshadow.html
kulate rohy - ramecky a mnoha prvky
http://css.interval.cz/priklady/priklad-21-1.htm
January 3rd, 2006 at 10:59 am (#)
Great job, very nice!.
I will use this technique, It´s very util for design web page.
thank you.
January 4th, 2006 at 7:15 am (#)
On FF its working perfect but on IE i see some troublems when i make width more than 13em (it showing border bottom [??]).
January 5th, 2006 at 12:40 pm (#)
I found this while doing a search for CSS rounded corner info. There’s a great Firefox-specific attribute called “-moz-border-radius: ##{units}” for doing this task. One problem (or is it really?) is that the attribute is specific to Mozilla/Firefox. But the real problem I was looking for an answer to is how to make that work in conjunction with an image based background. (Which would be uber-cool.) Using a background image loses the nifty corners. :(
January 25th, 2006 at 5:22 am (#)
part II ?!?!?
January 25th, 2006 at 2:41 pm (#)
Not bad, and definately outside of the box thinking. Good Job.
There are a few drawbacks. First, I don’t believe you will have much luck in putting a nice border around the box.
Second, if you use a background image instead of a solid color, you’ll need to use images for the corners as well. Possibly make the bullets images, but there are simpler ways.
And as someone else said, there’s a good chance that screen readers will have troubles with this.
January 30th, 2006 at 6:24 am (#)
[…] links for 2006-01-30
January 29, 2006 at 10:23 pm | In del.icio.us |
Fire and Knowledge » Rounded Corners Without Images, Part […]
March 8th, 2006 at 11:15 am (#)
Really cool. I am going to use it hoping it will make my page load faster. Thank you.
March 12th, 2006 at 9:30 pm (#)
[…] Rounded Corners without images by Joshua Sowin: his solution showed me that it was possible to avoid the use of images and the missing second part of the article pushed me to start thinking about it […]
March 25th, 2006 at 3:07 pm (#)
[…] Nifty Corners Cube - freedom to round Ref: Torresburriel.com Torresburriel.com Blogpocket Menéame « Anterior: Layouts CSS Siguiente: Technorati» […]
May 7th, 2006 at 6:34 am (#)
Nice idea and great thinking, just doesn’t sustain the intended appearance when you scale the web page (CTRL mouse scroll wheel)..
May 15th, 2006 at 5:23 am (#)
Hi
great work and thanks for helping. I want to know one thing that examples links are not working on this side and variation of examples. Kindly send me the working links of the examples.
Thanks
July 18th, 2006 at 7:25 am (#)
Nice !!
For some more about this you can have a look at http://www.cssplay.co.uk/boxes/snazzy.html
August 8th, 2006 at 1:36 pm (#)
[…] Link: Rounded Corners Without Images […]
August 15th, 2006 at 5:55 am (#)
[…] Sólo CSS sin imágenes: Rounded Corners Without Images stu nicholls | snazzy borders Cool trick: rounded boxes using CSS - and NO images! - GoTutorials Forums WebEstilo: Esquinas redondeadas sin imagenes Follow the Arrow […]
August 17th, 2006 at 6:30 am (#)
HI,
I very thankful to you because you have done great work. I am really frusted about that corner things. everytime i am confused with that corner thing but now you have solved the problem. if it is any problem i will connect with you. again thanks.
Regards,
Nareshk
August 31st, 2006 at 6:22 am (#)
You are freakin’ genius. I don’t care what anyone else says.
Everytime I tried to google “css rounded corners without images”, I’d get some site telling me how to do it with images…? Until I got here of course.
Yeah, there’s the problem with resizing text, but hey, I try to make my site readable in the first place. If people see fit to mess around with every little thing, then oh well.
Also, I found a neat thing happens when you have your CSS method nested in another div with a border-style element (specifically dotted, dashed or double). It isn’t really the exact illusion that yours alone provides, but more like pinstriping or old-timey scrapbooks. Of course this exhibits different effects in IE & FF, neither unpleasing (not tested in Opera or Safari).
Cheers man, thanks so much.
August 31st, 2006 at 9:27 am (#)
[…] Quite an old article but quite cool. Shows you how to get the nifty curved corners of content/nav boxes popularized by sites such as Blogger/Digg without the use of images.read more | digg story […]
September 26th, 2006 at 4:02 pm (#)
[…] Origional “hack”. Polished version. Posted under open source | […]
October 1st, 2006 at 11:15 am (#)
Regarding the comment about images taking less bandwidth, that’s not the full story. Even if the images are smaller in bytes, they will will probably take longer to load because the browser has to make 4 HTTP additional requests to get those images whereas the extra code is embedded inside the page. If you linked it in from a separate page, then this technique still uses less than 3 HTTP requests.
October 2nd, 2006 at 9:40 am (#)
[…] Äíåñ â ëþáèìîòî êëóá÷å íÿêîé áåøå ïîñòíàë åäíî ñòàðè÷êî, íî äîñòà èíòåðåñíî css ðåøåíèå íà ïðîáëåìà ñúñ çàîáëÿíåòî íà úãëèòå íà åëåìåíò… åòî ãî - Rounded Corners Without Images […]
October 22nd, 2006 at 1:32 am (#)
[…] Creating round […]
November 3rd, 2006 at 10:18 am (#)
[…] Creating round […]
November 28th, 2006 at 10:08 am (#)
Grazie mille, quello che cercavo :)
February 4th, 2007 at 3:22 pm (#)
I just ran across this today 2/4/07 (SB day) and I have tried it and think it is very nice.
I opened an experimental file using this in IE6, IE7, and Firefox 2.0.0 and everything looked just fine.
Even though I have used pages with images, I may go to this route for the ease of usage, instead of generating more images. In this you do not need to remember which images are for which box.
When will your version 2 or II come out?
Thank you very much for your time and effort.
February 5th, 2007 at 11:33 am (#)
OK..Too fast on the trigger.
After doing an experimental page when I did a full page with headers, content, footers, and such I got the line below the box as described above.
I tried Steve Lineberry’s suggestions but none seemed to work.
Maybe I just do not have the code right.
This line problem showed up in IE7 and Firefox 2.0.
Any suggestions as to the correct placement of code for this.
Any help much appreciated.
I am including the code I am using with some comments I made in it for my own reference
body {
background-color:beige;
margin: 0px;
padding: 0px;
font-size: 1.0em;
font-family: Georgia;
}
div.rounded-box {
position:relative;
width: 45%;
background-color: #ffffff;/* (You too) change this and one below for box color change*/
margin: 3px;
margin-left:5%;
margin-top:10%;}
/*********************
GLOBAL ATTRIBUTES
*********************/
div.top-left-corner, div.bottom-left-corner, div.top-right-corner, div.bottom-right-corner
{position:absolute; width:20px; height:20px; background-color:beige;overflow:hidden;}/*keep this and body back color same to hide corners*/
div.top-left-inside, div.bottom-left-inside, div.top-right-inside, div.bottom-right-inside
{position:relative; font-size:150px; font-family:arial; color:#ffffff; line-height: 40px;}/*change this and one marked you too to change box color*/
/*********************
SPECIFIC ATTRIBUTES
*********************/
div.top-left-corner { top:0px; left:0px; }
div.bottom-left-corner {bottom:0px; left:0px;}
div.top-right-corner {top:0px; right:0px;}
div.bottom-right-corner {bottom: 0px; right:0px;}
div.top-left-inside {left:-8px;}
div.bottom-left-inside {left:-8px; top:-17px;}
div.top-right-inside {left:-25px;}
div.bottom-right-inside {left:-25px; top:-17px;}
div.box-contents {
position: relative; padding: 8px; color:#000;
}
Thanks Charles
February 12th, 2007 at 10:24 am (#)
That’s a very good example. Thank you for posting.
–
Viraj
February 14th, 2007 at 3:16 am (#)
Cool concept, But page load is more, can you try to reduce the coding? Comparing to optimized 1 px image it wiil take more time to download
April 25th, 2007 at 8:37 am (#)
[…] - Rounded Corners Without Images This article will show you how to make rounded corners without images. That’s right. Without images. […]
May 9th, 2007 at 9:23 am (#)
[…] http://www.fireandknowledge.org/archives/2004/05/22/rounded-corners-without-images-part-1/ […]
June 7th, 2007 at 3:35 pm (#)
The simplest way to do rounded corners
Rounded corners are catching on quickly and so I was looking for an easy way to do them. There are quite a few ways already but most of them involve divs in divs in divs in divs etc. That is difficult to read, it’s easy to get confused if you ar…
June 21st, 2007 at 11:53 am (#)
I have made a plugin for jQuery that makes rounded corners without images
Check the demo at: http://code.google.com/p/jquery-roundcorners-canvas/
July 8th, 2007 at 2:51 pm (#)
I think it is a great idea , but as it said it does not work on Firefox Linux version I don’t know why ??? I am trying to apply these method on my website : http://www.cedece.com
July 18th, 2007 at 3:39 am (#)
Cool! I am going to use it hoping it will make my page load faster. Thank you!
July 21st, 2007 at 9:57 am (#)
Great!
Eactly was I was looking for. Thank you.
July 24th, 2007 at 12:15 am (#)
[…] Rounded Corners Without Images: Everybody loves rounded corners. A plethora of articles have been written about how to do it, but this is going to be different. This article is going to show you how to make rounded corners without images. That’s right. Without images. Posted by glenn […]
August 1st, 2007 at 6:48 pm (#)
[…] Reading this article listing 25 rounded corners techniques with CSS reminded me of perhaps the worst solution to the problem I ever read: rounded corners without images. 10 <div>’s and a whacking great chunk of CSS… and the funniest part is the claim that this is the future of rounded corners. What makes the laughter die a little is that three years later there’s still no pure CSS cross-browser solution without images. […]
August 30th, 2007 at 6:46 am (#)
div.rounded-box {
position:relative;
width: 9em;
background-color: #E6E6E6;
margin: 3px;
}
added position:relative;
work is perfectly
September 20th, 2007 at 3:02 am (#)
use in master page square to rounded corner through css
body {
background-color: #FFF;
margin: 0px;
padding: 0px;
font-size: 16px;
font-family: Georgia;
}
div.rounded-box {
position:relative;
width: 9em;
background-color: #E6E6E6;
margin: 3px;
}
/*********************
GLOBAL ATTRIBUTES
*********************/
div.top-left-corner, div.bottom-left-corner, div.top-right-corner, div.bottom-right-corner
{position:absolute; width:20px; height:20px; background-color:beige; overflow:hidden;}
div.top-left-inside, div.bottom-left-inside, div.top-right-inside, div.bottom-right-inside {position:relative; font-size:150px; font-family:arial; color:#E6E6E6; line-height: 40px;}
/*********************
SPECIFIC ATTRIBUTES
*********************/
div.top-left-corner { top:0px; left:0px; }
div.bottom-left-corner {bottom:0px; left:0px;}
div.top-right-corner {top:0px; right:0px;}
div.bottom-right-corner {bottom: 0px; right:0px;}
div.top-left-inside {left:-8px;}
div.bottom-left-inside {left:-8px; top:-17px;}
div.top-right-inside {left:-25px;}
div.bottom-right-inside {left:-25px; top:-17px;}
div.box-contents {
position: relative; padding: 8px; color:#ffe4cb;
}
•
•
•
•
Content Here ……….
September 30th, 2007 at 6:23 pm (#)
[…] myself… I have no idea why anyone would want to NOT use images unless you are a css purist. Fire & Knowledge has a tutorial on it making rounded corners without images.. and reasons why… I don’t find any […]
November 6th, 2007 at 2:47 am (#)
Nice piece of code,but still i guess it can be more simple than this.
March 14th, 2008 at 3:53 am (#)
I’m using it on my web and when I browser this on Firefox it gone wrong. When you using Firefox just add height and width exactly for this. Ex:
div.rounded-box {
position:relative;
width: 1000px;/* you must add this line on firefox*/
background: #FFF;
margin: 3px;
}
and this:
div.box-contents{
position: relative;
padding: 8px;
width:1000px;/*this line and the next line*/
height:360px;/* to welldone in firefox*/
color:#000;
}
just something I found, thank you for your code, Joshua sowin!
March 20th, 2008 at 2:28 pm (#)
[…] - Rounded Corners Without Images This article will show you how to make rounded corners without images. That’s right. Without images. […]
April 1st, 2008 at 8:37 pm (#)
[…] corners of content/nav boxes popularized by sites such as Blogger/Digg without the use of images.read more | digg story Share and Enjoy: These icons link to social bookmarking sites where readers can […]
April 16th, 2008 at 5:14 am (#)
[…] Borders : http://kalsey.com/2003/07/rounded_corners_in_css/ Creating Rounded Borders With Images : http://www.fireandknowledge.org/archive … es-part-1/ Margins : http://www.tizag.com/cssT/margin.php Borders : http://www.tizag.com/cssT/border.php […]
May 12th, 2008 at 10:37 pm (#)
[…] Rounded Corners without images by Joshua Sowin: his solution showed me that it was possible to avoid the use of images and the missing second part of the article pushed me to start thinking about it […]
May 21st, 2008 at 1:28 pm (#)
The intention is very good, and the way you presented to do this has potential, but I think it lacks a few tweaks… I got your source, and tried to customize. That’s when you get problems.
I don’t know, maybe a good thing would be to create a javascript function like
function roundedCorners(divId,borderSize,color) { … };
This function would be responsible for getting the div element with the specified id, and adding the necessary div elements within it, setting their styles, etc. You get the picture.
Anyway, congrats.
June 9th, 2008 at 3:02 am (#)
Thanks , another great tutorial
June 25th, 2008 at 11:18 am (#)
Nice tips…
I have applied this method to my blog themes, it looks simple.
Thanks for the tutorial and all useful links from the others.