Round corners and CSS3

MartinRinehart · 26 Aug 2010, 16:34

Your webdialogs can sport lovely round (and elliptical) corners without any of the serious hard work that round corners used to require. All browsers but one (guess) now have this feature.

To set four corners of a div (for example) to a radius, you just:


myDiv.style.borderRadius = '10px';
myDiv.style.MozBorderRadius = '10px';

(Yeah, Mozilla is not quite standard, yet. Ugh.)

I've written a little JavaScript tool that let's you play with several common style attributes, shows you an example as you fuss and then writes the code when you're done fussing.

This is brand new, so expect some teething troubles.

Delete the ".txt" and open in your favorite browser.

thomthom · 26 Aug 2010, 18:00

IE9 should have support for this. So when users upgrade to IE9 they'll get nice rounded corners.

(though - if I remember correctly, you'd need to use a proper doctype.)

Hieru · 27 Aug 2010, 09:40

IE9 is promising to be 'the' CSS3 browser, which sounds like a good thing.

I would still however do this using html. In my experience there are still a lot of people using IE5 & 6. As a web-designer it's incredibly frustrating and I've had to rework a number of recent designs because friends of a client (who insist that they have the latest updates and browser ) can't view CSS3 techniques or things like image transparency.

With Christmas coming up (sort of) I would like Santa to give everyone an upgrade to the latest browser.....or maybe a lump of coal to everyone who can't be bothered to do this for themselves.

thomthom · 27 Aug 2010, 10:20

@hieru said:

I would still however do this using html.

Do layout in HTML?

@hieru said:

As a web-designer it's incredibly frustrating and I've had to rework a number of recent designs because friends of a client (who insist that they have the latest updates and browser ) can't view CSS3 techniques or things like image transparency.

Rounded corners is an easy feature to handle - as it simply degrades to square.

With all the improvements in IE9 - when it comes out it's very likely that I'll make my plugins require IE9.

Hieru · 27 Aug 2010, 11:21

@unknownuser said:

Do layout in HTML?

Sorry, I haven't got my head screwed on straight this morning.

I meant to say html (divs) with CSS 2.

@unknownuser said:

Rounded corners is an easy feature to handle - as it simply degrades to square.

If you and your clients are happy with that, then that's fine.

Personally I like to do my best to render a design as consistently as possible across all platforms. That's why I'm holding off from using CSS 3 for the time being.

I mean, if rounded corners are an essential part of a site design, isn't the whole design going going to be undermined if those rounded corners are squared off?

@unknownuser said:

With all the improvements in IE9 - when it comes out it's very likely that I'll make my plugins require IE9.

Won't that be a bit like implementing one of those annoying splash pages that say "This site is best viewed using IE(X). We recommend that you upgrade to the latest version of your web browser or use Firefox"?

We all want to say it, but..............

thomthom · 27 Aug 2010, 12:03

@hieru said:

If you and your clients are happy with that, then that's fine.

Personally I like to do my best to render a design as consistently as possible across all platforms. That's why I'm holding off from using CSS 3 for the time being.

In terms of webdesign - I make flexible design. With the wide variety of browers, versions, devices, capabilities, screen-resolutions it is impossible to get a pixel perfect cross-platform/browser result. Users that use devices with more capabilities get more nice stuff. As long as the site is usable and easily legible (which is the most important part) I have no problems serving content that differ from users to users.
The users won't care or notice - the only ones that does is the client and the webdesigner. (Yes -I know that one need to get the approval of the client - that is the challenge.)

@hieru said:

I mean, if rounded corners are an essential part of a site design, isn't the whole design going going to be undermined if those rounded corners are squared off?

How essential can rounded corners be?

@hieru said:

Won't that be a bit like implementing one of those annoying splash pages that say "This site is best viewed using IE(X). We recommend that you upgrade to the latest version of your web browser or use Firefox"?

A bit - but I'm not talking about webdesign in this instance - but for SU webdialogs. There are so many improvements in IE9 (not just CSS) that would make designing a UI much more powerful, easier and prettier.

@hieru said:

We all want to say it, but..............

Yup - and when it comes to my freeware plugins - I'm now saying it. I've spent enough time of my life hacking IE to hell and I'm fed up with it. I want to use HTML5,CSS3,SVG,Canvas and new JS engine to make good UI for my plugins. So if that force people to update to IE9 - so be it. It's free (IE9 and my plugin) . Or they can choose not to.

MartinRinehart · 27 Aug 2010, 12:32

@hieru said:

@unknownuser said:

Do layout in HTML?

Personally I like to do my best to render a design as consistently as possible across all platforms.

I like to do my best work in each browser. If square corners aren't best, round your corners. It doesn't make sense to me to have everyone dropped to the lowest common denominator because some people only have square corners.

I'd go on longer on this, but today I'm looking at the Opera-only "transform" feature. I'd really like to be able to rotate my images.

Anyone tried my "Stylist" tool? It's a major time saver. Anyone who can help me get Chrome to properly write the innerHTML (lines 1012 thru 1018 - it works in Opera and Firefox) would earn my eternal gratitude.

thomthom · 27 Aug 2010, 12:34

@martinrinehart said:

It doesn't make sense to me to have everyone dropped to the lowest common denominator because some people only have square corners.

Aye.
The web is dynamic - websites should be as well.

MartinRinehart · 27 Aug 2010, 12:45

@thomthom said:

The web is dynamic - websites should be as well.

The attached might amuse you.

Delete the ".txt" and open in a good browser.

MartinRinehart · 27 Aug 2010, 13:04

Oh !@#$.

I forgot what browser the PC user will get for a WebDialog. Be kind to Mac users!

Hieru · 27 Aug 2010, 13:43

@unknownuser said:

How essential can rounded corners be?

It depends on the design. I can certainly imagine situations where square boxes could completely undermine the look of a site.

In other situations I don't suppose it would make much difference. SU web dialogues probably being one of those instances.

I would like to think that most SU users keep up to date with the latest updates for their computer, automatically upgrade to newer browsers and therefore get the most out of the great work that you do.

@unknownuser said:

I've spent enough time of my life hacking IE to hell and I'm fed up with it......

Hieru · 27 Aug 2010, 14:42

@unknownuser said:

It doesn't make sense to me to have everyone dropped to the lowest common denominator because some people only have square corners.

I couldn't agree more and in general I aim to create designs that work best in the latest browsers and degrade gracefully in older browsers (back to IE6).

The problems start when clients raise concerns about how a site looks when friends or colleagues view the design in IE5.

Obviously we think that people owe it to themselves to use the latest browser - benefiting from better security and an enhanced user experience. All too often the end user sees things very differently and thinks it is unreasonable to expect them to regularly update their software.

How are you supposed to push yourself and strive to innovate when you are - as you say - limited by the lowest common denominator?

Sorry about the rant, but after a month of dealing with a difficult client I suppose the subject struck a nerve. I'll leave you with a quote from said client: "I don't understand why you keep sending me these designs that look very contemporary, can't you do something classy like the websites we use to see in the 90s"

thomthom · 27 Aug 2010, 15:14

@hieru said:

The problems start when clients raise concerns about how a site looks when friends or colleagues view the design in IE5.

Feel your pain. Apparently everyone is a designer - whether is graphics or web. It's not that they have an opinion - but they firmly believe their opinion is the best. Tiny cosmetic details becomes major issues - or they have a firm opinion of how everything should work and look - ignoring the usability of it. Never mind that webdesign incorporates many disciplines that historically been a trades in their own right - noooo - "I got a computer, I got PhotoShop lets have a filter orgy feast, throw in a bunch of novelty animations!" Ach! Clients! Who need'em?! ... oh right...

sigh These kinds of topics gets me all too easily hot-headed... my apologies.

Anyway - yes, CSS3, fun stuff!

Hieru · 27 Aug 2010, 15:33

@unknownuser said:

It's not that they have an opinion - but they firmly believe their opinion is the best. Tiny cosmetic details becomes major issues - or they have a firm opinion of how everything should work and look - ignoring the usability of it.

That's my last client in a nutshell.

@unknownuser said:

Anyway - yes, CSS3, fun stuff!

lyndaeldo · 10 Jul 2014, 06:26

More about CSS round corners....http://www.corelangs.com/css/box/round.html

lynda