PDA

View Full Version : Rounded container corners


johnMoss
02-03-2011, 04:14 AM
Anyone have a tried & true method of using css for rounded corners?
The effect I'm after is what can be seen here:
http://trial.selectory.com/lp/google/code/sic-codes.html?registrationcode=goog0341&LeadDest=DNB

Specifically I'm referring to the container's rounded edges against a colored background. I've been able to recreate it with a container background image but that just seems a very sloppy way of doing it...

edbr
02-03-2011, 04:38 AM
you could use corner images and position them absolutely in the corners

johnMoss
02-03-2011, 05:03 AM
I actually did that by creating a div above a primary 'container' and inserting an 800 x 20 rounded edge white background. It gets a little trickier though... As you saw the rounded corner at the top right, my intent is to overlay an image against the background such that the photo and the rounded edge line up with each other. A little trial & error in photoshop produce a perfect curvature match, but getting the picture into position is another story. Of late I'm getting a little too comfortable playing oddball games with margins & padding, which I'm sure is an excellent way to get handslapped in this crowd. I've seen some answers using more complex coding but I don't get the impression they're suitably usable for different browsers. A fail-safe is to of course simply create a merged image with the desired picture in photoshop and use that as a background, but in doing so I feel like it's a cop-out... Thoughts?

edbr
02-03-2011, 06:25 AM
#topleft{position:absolute; top:0;left:0:}
#bottomleft{position:absolute: bottom:0;left:0:} etc
use 4 small images of corners ans place them in yoyr containing div (which would be positioned relative. That would be 1 way of doing it

Corrosive
02-03-2011, 07:16 AM
I use CSS3 for this now with; http://fetchak.com/ie-css3/ for IE. You need to be a bit careful with implementation for IE CSS3 but using both is widely enough supported to make it a viable option now. And, no mucking about with images!

johnMoss
02-03-2011, 04:07 PM
Thanks guys for both... Toby, that's the one I saw. Seeing as it has your blessing I'm gonna roll with it and see how it performs.

Corrosive
02-03-2011, 04:42 PM
One thing I would add about IE CSS3 is give it a full URL path as it seems to perform better than a relative one.

johnMoss
02-03-2011, 04:56 PM
Can you expound on that a tad further? I don't quite get the gist of that statement...:confused:

gentleone
02-03-2011, 05:52 PM
I guess Corrosive means instead of this:
behavior: url(ie-css3.htc);Something like this:
behavior: url(http://www.yourdomain.com/css/ie-css3.htc);

johnMoss
02-03-2011, 09:11 PM
Ah, got it, thank you. I'll do a little reading on the why's & wherefore's on this as well...

Corrosive
02-04-2011, 08:26 AM
I guess Corrosive means instead of this:
behavior: url(ie-css3.htc);Something like this:
behavior: url(http://www.yourdomain.com/css/ie-css3.htc);

Yep, got it in one :)

jmichae3
02-07-2011, 10:02 AM
the author there forgot opera and something else.

-o-border-radius:8px;
-khtml-border-radius:8px;
-moz-border-radius:8px;
-webkit-border-radius:8px;
border-radius:8px;


I usually combine radius of 5-10px with padding of 24px and that works out pretty nicely.

HOWEVER, IE6, 7, 8 do not do rounded corners except with a lot of extra coding hassle with vml. it's not easy to look at or code, and it's not made for doing rounded corners, so IE coding is a brain-twister + it requires IE conditional comments in your code. IE9 still supports VML. That should have left. IE9's border-radius doesn't work yet. IE9 will NOT become available for XP users or 2000 users. IE7 & 8 are not available for 2000.


I just let the IE users suffer because I am too lazy and I like html5+css3 (especially the transform(rotate:47.9deg) which isn't here quite yet).

yes, the tried and true way is to use images. that works on all browsers and versions (past netscape & ie3). I would wholeheartedly recommend that method if you want something that's not a brain-twister.

Corrosive
02-07-2011, 10:18 AM
HOWEVER, IE6, 7, 8 do not do rounded corners except with a lot of extra coding hassle with vml.

That's not strictly true as the ie css3 htc file works well in IE 6 to 8.

jmichae3
02-07-2011, 10:38 AM
not as well as you might think, I've tried it, and it breaks on my site.

jmichae3
02-07-2011, 10:51 AM
I take that ie9 comment back. I didn't have all these in my web site, put these in, and now my pages render with ie9 properly.

Corrosive
02-07-2011, 11:13 AM
not as well as you might think, I've tried it, and it breaks on my site.

Once I'd sussed the full URL sticky point I've implemented it on a few sites with no issues at all. It definiately works for me. The one thing (frustratingly) it won't do is a rounded drop shadow on IE 6 - 8. The corners round but the drop is square!

johnMoss
02-07-2011, 03:25 PM
Well so far everything executes as desired. The site revamp hasn't gone live yet, so I can't test the IE full url path until it does...
I have two sets of instructions in the CSS for the IE hack, one for local, and the other the full URL path. Curious to see if they interfere with each other in a live setting. My assumption is no....

domedia
02-07-2011, 03:58 PM
Ah, got it, thank you. I'll do a little reading on the why's & wherefore's on this as well...

The .htc file has to, unlike url() in CSS files, be relative to the page which calls the CSS, instead of relative to the CSS file itself. This is why things get a little tricky.

johnMoss
02-10-2011, 04:58 PM
.container {
margin: 20px auto 0 auto;
background: #FFF;
width:820px;
color:#27415f;
-moz-border-radius: 25px; /* Firefox */
-webkit-border-radius: 25px; /* Safari and Chrome */
border-radius: 25px; /* Opera 10.5+, future browsers, and now also Internet Explorer 6+ using IE-CSS3 */
-moz-box-shadow: 10px 10px 20px #000; /* Firefox */
-webkit-box-shadow: 10px 10px 20px #000; /* Safari and Chrome */
box-shadow: 10px 10px 20px #000; /* Opera 10.5+, future browsers and IE6+ using IE-CSS3 */
behavior: url(http://www.californiareversemortgageguide.org/css/ie-css3.htc);
}


Other browsers fine but both radius & shadow are inop in I.E.

website is http://www.californiareversemortgageguide.org

see anything missing or incorrect?

Corrosive
02-10-2011, 06:18 PM
When I click on your link to the .htc file I get a 404 error (page not found). Is it where you have said it is?

johnMoss
02-10-2011, 07:09 PM
um...er... it might help if i load the file, huh.....

Corrosive
02-10-2011, 07:12 PM
um...er... it might help if i load the file, huh.....

Yeah, you'd be surprised what a difference that will make ;)

johnMoss
02-19-2011, 06:25 AM
Final Post: For reference purposes to the archive the hacks are successful in all tested browsers...