Box with Rounded Corners?

HTML & CSS
1

I am stuck in the 1970s…

How do I make a Box with Rounded Corners using CSS?

And how well supported is that?

(Not a big fan of fancy new fads that aren’t well supported.) :rolleyes:

Thanks,

Debbie

2

The most common functions:

.some_class_1 {
 border-radius: 10px; // This will create a circular rounded corner, with a radius of 10 pixels.
}

.some_class_2 {
 border-radius: 10px 5px; // This will create an eliptical rounded corner, with an x-axis radius of 10 pixels, and a y-axis radius of 5 pixels.
}

.some_class_3 {
 border-top-left-radius: 10px; // This will create a circular rounded corner in the top left corner, with a radius of 10 pixels;
 border-bottom-right-radius: 10px; // This will create a circular rounded corner in the bottom right corner, with a radius of 10 pixels;
}

Note: This does not include browser-specific CSS. Browser-specific CSS is pointless bloat for your stylesheet. This is decoration, and those who use browsers which doesn’t implement rounded corners with the proper syntax, will just have to see square corners. Gasp! The most recent versions of Internet Explorer and Chrome supports rounded corners with the proper syntax. I’m guessing Opera does too.

3

Take a look at CSS3 PIE if you must have the corners persist to <= IE8. While it may be nice to say well they are decoration, its better then needing to explain to clients why the integrity of the design needs to be sacrificed on the most common browsers and get a blank stare. Design integrity shouldn’t be sacrificed if something reasonable can be done about it imo.

4

I disagree. If the feature is not critical to the functionality of the website, and the effect is supported by the newest version of all major browsers, there is no reason to cater for older versions. In the fairly unlikely event that the client does notice missing rounded corners or dropshadows, and actually points it out, it can be quickly implemented if necessary. There’s no reason to assume the client will notice it, though, and make his website unnecessarily bloated.

5

How does my browser know I’m using CSS3?

Do I have to install something?

Do I have to change my HTML or CSS in the heading/top so it knows it is CSS3?

Note: This does not include browser-specific CSS. Browser-specific CSS is pointless bloat for your stylesheet. This is decoration, and those who use browsers which doesn’t implement rounded corners with the proper syntax, will just have to see square corners. Gasp! The most recent versions of Internet Explorer and Chrome supports rounded corners with the proper syntax. I’m guessing Opera does too.

So is it premature to develop using CSS3 if it isn’t entirely supported?

My website looks good with square/rectangular DIVs, but I think slightly rounded corners would take things to the next level.

Debbie

6

How does my browser know I’m using CSS3?

Do I have to install something?

Do I have to change my HTML or CSS in the heading/top so it knows it is CSS3?

CSS3 is just the release name. You use it just like all other CSS. If the browser understand the specific declaration, it will act on it, otherwise it will be ignored. You don’t need to install anything or change anything, other than adding the CSS.

So is it premature to develop using CSS3 if it isn’t entirely supported?

My website looks good with square/rectangular DIVs, but I think slightly rounded corners would take things to the next level.

Not at all. Use it to your hearts content. Those who use outdated browsers simply won’t see the specific effect, but will still see all the other CSS effects. When they upgrade their browser, they’ll see a site improvement. Until then, they’ll be none the wiser.

7

Okay, just being sure!

Not at all. Use it to your hearts content. Those who use outdated browsers simply won’t see the specific effect, but will still see all the other CSS effects. When they upgrade their browser, they’ll see a site improvement. Until then, they’ll be none the wiser.

Well, I’ve worked very hard to make a website that is compliant and that meets standards. (Thanks to everyone here at SitePoint!!) :tup:

Guess I’ll be a wild girl and try a little CSS3 to spice up my website?! :lol:

Thanks,

Debbie

8

Go nuts. You might also want to look into box-shadow :slight_smile:

9

Basically, the rounded corners will not be applied in IE6, IE7 and IE8 – most if not all of your market share. If your fine with sacrificing the design integrity in those browsers then so be it. I work with people who use those browsers and once was enough for me in explaining progressive enhancement to bunch of none technical people. If anything it makes you look incompetent and I hate looking incompetent in meetings. The less I have to explain the less I have to drink. When given a design the design should be as close as humanly possible in the major browsers – I work with my designers not against. If that means a few lines of extra browser specific CSS or HTC file, so be it. I mean if you take the approach for gradients only using linear-gradient your going to be sh*t out of luck in just about all browsers. Rounded corners are one of the more widely adapted standard, but just about everything else in CSS3 specification is not and requires browser prefixing to be cross-browser compatible. just saying…

10

As said, using css3 for round corners will leave some 50% of your users with square corners. If you use piecss3 js then that will fill the blank for ie6/7/8. But for them to use it they need js on and a couple other requirements. The only way to 100% cross browser is to use images. The easiest way is seen here http://www.visibilityinherit.com/code/vertically-liquid-round-corner-box.php

11

Since I switched to a Mac in 2008, I’ve become clueless on Windows…

What version of IE is Microsoft up to?

What percentage of Microsoft users use:

[INDENT]- IE6?

  • IE7?
  • IE8?
  • whatever comes after that?
    [/INDENT]

And what percentage of users use:

[INDENT]- Opera?

  • FireFox?
  • Chrome?
  • IE?
    [/INDENT]

It believe it was you above that recommended some 3rd-party software/solution to address this compatibility issue…

Didn’t have time to really look at it yet, but how compatible is this compatibility-solutions?! :lol:

Is it just installing the software on my web server?

Lastly, I am really just interested in Round-Corners for now. What coverage would I get if I just use that aspect out of CSS3?

You make it sound like almost everyone on Windows would be blocked out… :-/

Thanks,

Debbie

12

If you’re going to use images, why not a Quarter-Round so things are fluid both ways and you save bandwidth?

Debbie

13

yep, might as well be – thank Microsoft!!!

I wouldn’t take it as far as though to say support it without JavaScript. If someone is using <=IE8 w/o JS enabled then whatever – that is going to be a small percentage and not likely the client.

I have no clue what over all market share is throughout the entire web. However, the websites owned by the company I work for is about ~70% IE I believe. Which is a lot of people to give the finger to…

That said, rounded corners are one thing that is widely adapted enough to do away with old method of extra unsemantic elements – that method flat out sucks and all its ever been is a hack, just as table where for layout. The advantages of using CSS3 rounded corners far outweigh the advantages of using images.

There isn’t any installation involved. In some cases you merely reference the HTC file and others there is a special pie prefixed property. The documentation is really quit good so in no way will I be able to explain it better than the creators themselves.

14

I just checked the stats of one of my websites, which is very non-technical, and only about one third of the users are using Internet Explorer 8 and below. Also, missing rounded corners or drop shadows is not the end of the world. The ethical thing is to simply not mention it to the client.

15

You can if you just want round corners with no frills. Here are all those methods. http://www.visibilityinherit.com/code/rounded-corners-css-plus-images.php

Or you can do it with pure css(2). http://www.visibilityinherit.com/code/rounded-corners-purecss.php

Or you can just do it with js http://www.visibilityinherit.com/code/rounded-corners-js1.php

Or you can just do it with css3 http://css3pie.com/ then you get all the frills with less pain

16

Debbie:
you’ll like this site: http://caniuse.com/

You’ll still need to test stuff, but if you want to quickly look up who claims to support what, this is easy reference.

It’s “unlikely” if you prototyped in HTML/CSS instead in an image editor. Clients using IE/XP never saw the stuff, so they don’t miss it. But most of the time, some photoshop jockey made a PSD and that’s (at least part of) what sold the client on the web site.

Once they’ve seen stuff like textures, shadows and corners on some PSD, they are actually quite likely to miss them on the live site.

So I’d say it strongly depends on what the client has already seen and what they demand. I’ll add a few vendor prefixes but because it’s is indeed so much bloat, I don’t do it much, and I don’t cater heavily to IE… but I would if the person I was building for demanded it (and, instead of PIE I’d certainly go to images using something like what Eric’s posted).

THIS. ++

For us, it seems to strongly depend on the site. Our insurance sites have higher IE6 use, more daytime visitors, and almost 80% IE users.

However our jean selling site has slightly under 50% IE users, gets more evenings and weekends, more Firefox and iPhones.

I was way more okay letting things slide for IE-on-XP on the Jeans site than I was on the insurance sites, for this reason. Though again, I had a lot more freedom than some freelancer told to create a code version of some PSD, and I could leave IE to do whatever it could without loading a bunch of extra crap to look like the latest webkit nightlies (or, really, anyone else : )

It would depend, for me. I generally don’t like the idea of the user loading a bunch of scripts just to see shadow and rounded corners and junk, but on the other hand that would have to be balanced out with, is the other option making everyone download extra images? That would influence my chosen technique there.

10’s around the corner and it’ll have an HTML5 parser and a bunch of whatever css3 9 didn’t do…
but 9 and 10 don’t run on Windows XP. If you have any good number of corporate clients or visitors, they’re not getting higher than IE8 if they couldn’t move over to another browser (for the same reason, I can’t test IE9/10 either… I’ll have to buy Windows 7 or something).

IE6 use is, today for me, pretty much tied to your financial cube-dwellers now. I used to just count “corporate” or “enterprise” but IE6 use dropped hard around here (NL) recently so it’s now quite restricted to our banks and whatnot. Seems the rest upgraded to IE8.

BTW there’s a bug you might run into; I’ve only heard of it, myself.
If you are combining CSS rounded corners WITH CSS gradients AND the IE version of those gradients (the filter stuff), apparently IE9 can’t walk and chew gum at the same time there and the gradient is painted on the padding-box while the borders are rounded with the border-box and the gradients will stick out in the corners. No gradient, no problem. So if you need to combine the two, another solution might be better if you’ve got lots of IE-using clients.

I don’t know if this is fixed in 10.

17

Thanks for all of the help and thoughts - guys and gals - on implementing Rounded Corners.

Will have to chew on all of this advice!

If any of you gurus are feeling generous, feel free to leave your 2-cents at my other thread entitled: “Need Page Flow for Events Website…” :wink:

Thanks,

Debbie

18