Rounded Corners Without Images

[abstract]

See this post for Rounded corners. Here CSS (bg image) is used for corners.

Developer Instincts: Rounded Corners Compatible with All Browsers

This works in all browsers. Check the tutorial.

[freeflyer]

the CSS rounded corners is now useable in most browsers, firefox, opera, safari etc etc APART from , as usual, IE, who insist on ignoring everything everyone else is doing.. again.

Personally, i just use CSS corners anyway, and sod IE. Yes yes, i know IE accounts for the majority of users, but i'm not bowing down to them any more.. i've had enough of it. I'm usiong rounded CSS on many commercial sites, and if IE users cant see them , tough.

[digi1001]

Many thanks abstract - much appreciated. I'll stick with images from now on.

Well for IE you will have to use the strategy described above in start of this thread. By default mozilla supports this rounded corner CSS property. But I think they have introduced a border-radius property for rounded corners, but this will work only in CSS3 compatible browsers which may work for IE (if they start following standards).

So, for IE I will personally prefer images method to avoid any issues. Also when coming to JS IE always works differently so I think its better to avoid JS version and use images for corners.

Though there are some really good ways to use images too (using in nested div structures and using class to set background of each div.

[MaFtuk]

the CSS rounded corners is now useable in most browsers, firefox, opera, safari etc etc APART from , as usual, IE, who insist on ignoring everything everyone else is doing.. again.

Personally, i just use CSS corners anyway, and sod IE. Yes yes, i know IE accounts for the majority of users, but i'm not bowing down to them any more.. i've had enough of it. I'm usiong rounded CSS on many commercial sites, and if IE users cant see them , tough.

i agree! sod IE... there's just one site though that I really wanted everyone to see the curves so i just used css and png/gif images. as you can see, i think it looks rather nice: Wedding Videographer Hampshire-Wedding DVD Camberley Hampshire

MaFt

[freeflyer]

you know all links on this forum are nofollow dont you? And by the way, you cant use two title tags in an attempt to fool the search engines, as it doesnt work. They'll just choose the first one.

[MaFtuk]

i agree! sod IE... there's just one site though that I really wanted everyone to see the curves so i just used css and png/gif images. as you can see, i think it looks rather nice: Wedding Videographer Hampshire-Wedding DVD Camberley Hampshire

MaFt

The title tags cock up is the stupid seo rip off company pratting about with code incorrectly. Will fix that when I get home.

I also don't like your accusation that I am posting it here to get google ranking up. The discussion is about different ways to create rounded corners so I was showing it can be done effectively without needing JavaScript.

MaFt

[MaFtuk]

i agree! sod IE... there's just one site though that I really wanted everyone to see the curves so i just used css and png/gif images. as you can see, i think it looks rather nice: Wedding Videographer Hampshire-Wedding DVD Camberley Hampshire

MaFt

The title tags cock up is the stupid seo rip off company pratting about with code incorrectly. Will fix that when I get home.

I also don't like your accusation that I am posting it here to get google ranking up. The discussion is about different ways to create rounded corners so I was showing it can be done effectively without needing JavaScript.

MaFt

[abstract]

It looks good. Its using images method.

The title tags cock up is the stupid Search Engine Optimization rip off company pratting about with code incorrectly. Will fix that when I get home.

I also don't like your accusation that I am posting it here to get google ranking up. The discussion is about different ways to create rounded corners so I was showing it can be done effectively without needing JavaScript.

MaFt

[freeflyer]

Search Engine Optimising For Derby, Burton on Trent, Lichfield, Tamworth, Nottingham, Leicester

[freeflyer]

I also don't like your accusation that I am posting it here to get google ranking up.

MaFt

okay maybe i was being a bit harsh there.. apologies. you'd be suprised how many do though.

Why dont you find yourself a decent Search Engine Optimization company though if your current one is messing up (which they are, clearly). Your site needs work too if its to succeed, you're making a lot of mistakes in the deployment.

Thats not a criticism, its just free advice. I can turn it around if you want (as can others i'm sure). Either way i'd get working on it if you're going to be relying on it for new business.

[Gallier]

Oh thanks alot...It is really interesting. I am going to try this too...
I have been working on some other similar stuff too, I will post it soon too.

Try this. Rounded corners without images & javacript.

<style type="text/css">
.rndbxg b.trg, .rndbxg b.brg { display: block }
.rndbxg b.trg *, .rndbxg b.brg * { display: block; height: 1px; overflow-y: hidden; font-size: 0 !important; border-width: 0 1px; border-style: none solid}
.rndbxg b.trg b, .rndbxg b.brg b { margin: 0 4px }
.rndbxg b.trg i, .rndbxg b.brg i { margin: 0 2px }
.rndbxg b.trg u, .rndbxg b.brg u { margin: 0 1px !important }
.rndbxg .rndbxCg { border-width: 0 1px; border-style: none solid; padding: 0; overflow: hidden }
.rndbxg b.trg u, .rndbxg b.brg u { height: 2px }
.rndbxg b.trg i, .rndbxg b.brg i { border-width: 0 2px }
.rndbxg b.trg b, .rndbxg b.brg b { border-width: 0 }
.wrndbxg b.trg b, .wrndbxg b.brg b { background: #cccccc }
.wrndbxg b.trg i, .wrndbxg b.brg i, .wrndbxg b.trg u, .wrndbxg b.brg u, .wrndbxg .rndbxCg { background: #ffffff; border-color: #cccccc }
.grndbxg b.trg *, .grndbxg b.brg *, .grndbxg .rndbxCg { background: #ececec !important; border-color: #ececec !important }
</style>

<div style="padding: 10px; width: 100%">

 <div class="rndbxg wrndbxg">
  <b class="trg"><b></b><i></i><u></u></b>
   <div class="rndbxCg">

    <div style="padding: 10px">
    <div align=center>Rounded Corners Without Images</div>
    </div>

   </div>
  <b class="brg"><u></u><i></i><b></b></b>
 </div>

</div>

This will work in Firefox - IE - Opera and others

[gecmark]

Thank you for sharing.

[gecmark]

Thanks for the link.

[Dan321]

Thanks for sharing. Useful tool for sure!

[logon68]

Thanks for that link flesso the link is very helpful

[gillianreyno]

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">
&bull;
</div>
</div>
<div class="bottom-left-corner">
<div class="bottom-left-inside">
&bull;
</div>
</div>
<div class="top-right-corner">
<div class="top-right-inside">
&bull;
</div>
</div>
<div class="bottom-right-corner">
<div class="bottom-right-inside">
&bull;
</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!