CSS rounded corners without images

CSS rounded corners without images

This is something I've been playing with for years, and I just did a total rewrite on my 'howto' page on the subject.

http://battletech.hopto.org/html_tutorials/rounded_css_borders/template.html

the directory

http://battletech.hopto.org/html_tutorials/rounded_css_borders

is unlocked for ease of access.

This is the first semi-completed page for my upcoming site of web tutorials and guides. Only some 80-160 more pages to go...

Just thought I'd share. I'm rather proud of this one.

Hello,

thanks a lot for this one. This might be useful in the future.

Interesting, that 'article' is dated two months after my original version (which I think I linked to on Sitepoint - couldn't tell you these days since they banned me for using the "W" word - I was not aware that constituted a racial slur - I think they were just looking for a reason)... and has the same flaws as my original, it's class heavy... and has a flaw mine didn't have in not only using a meaningful tag instead of a meaningless one, and he used overflow:hidden to correct IE6 instead of the font:1px/1px which fixes IE 5.x as well. (though at least he didn't resort to like I did)

Of course, I particularly like the javascript that by all appearances is bigger than just inlining the markup in the first place... That should be what insertAdjacent is for in IE and innerHTML is for RoW. Also seems overly concerned with using it on inline tags - being it's a bunch of stuff set to display block and what you would use it on, it sounds like he's using tags wrong in the first place.

But then this guy apparantly listens to Eric Meyer, so go figure.

This looks like very nice coding indeed,

I´ve been trying to figure out a way to give my text-background image rounded corners for the last two days, trying to make an image, and then figuring out the css part ofthe image-story.

Without having looked into your work I come up with a first question:

- Can semi-transparency be used in the colours?

Nice example, deathshadow.
I must confess, I never thought of using anything else but images on doing rounded corners, so that really blowed my mind.
I'm looking forward to your completed tutorial...

I hope other browsers pick up on their SVG development and catch up with Opera's internal builds, specifically being able to use SVG image as backgrounds. Perfect solution - one image file, any size, no extra markup!

Originally posted by johnnysaucepn:

I hope other browsers pick up on their SVG development and catch up with Opera's internal builds, specifically being able to use SVG image as backgrounds. Perfect solution - one image file, any size, no extra markup!

Which you CAN actually pull off using normal images via javascript or :before/:after on fixed width elements and still have dynamic height via a variant of "Eight corners under one roof"... or by way of CSS3's multiple background images. (Oh, I wish that one was more readily available)

Though using transparant images on the corners using multi-backgrounds without an extra container is not really feasable, but with :before/:after you can.

Deathshadow, if you want, I can look through your threads on SP and pull it up for you.