The page now offers a more comprehensive and easy to follow guide/tutorial, including cross-browser examples, which should enable any designer (whether novice or expert) to get to grips with border-radius in a matter of minutes.
This is the first in a series of updates to the CSS3 Preview section of this site, with more to follow over the coming weeks.
You can read the updated article here.
You can skip to the end and leave a response.
it is very well
I still think they should add angled corners, (like / or ) and let you define the angle. It would also be nice to chamfer/bevel the rounded corners in so they are like this at the top
Fireworks allows you to pull off those kinds of corners.
Cool. By the way, it is generally better to list the prefixed versions first, so that when the browser updates to use the unprefixed (but still also keeps the unprefixed for compatibility), then the latest, greatest version will take precedence. At least in theory. Mozilla HAS indicated that they will drop all support for the old prefixed version as soon as they support the unprefixed one; backward compatibility be damned. But still, it is usually a better practice to put the unprefixed version after the vendor versions in the rule.
Jeffrey, you made a similar comment when the Backgrounds & Borders Last Call was announced here on June 16. And you were answered, but I’m guessing you didn’t read the answers. That part of the module was then moved out or the “Borders” section to avoid this sort of confusion. So I guess it is the name that still confuses, but it’s a little late to change it now.
Jive, I think something like that will be in a CSS4 module eventually, perhaps with a keyword to choose a corner style, with the existing measurements to determine dimensions of the corner piece (and therefore the angle if it is a straight line). CSS3 Backgrounds & Borders has reached a stage where no new features are being added.
border-radius: 15px; (works only for Opera)
-moz-border-radius: 15px; (works only for Mozilla Firefox)
and for Safari and Chrome it is
So we need to include all three codes.
There is no border radius style for IE8 and below. They might add it in IE9
Anosesj, There is still some debate about box-shadow, so it may be changing again. Webkit (Safari/Chrome) blurs are smaller than Gecko’s (Firefox’s) beyond a certain size, apparently due to a bug. And unlike the current draft, if you author a box-shadow with a 100px blur, there is nothing on the screen that you can actually measure as being 100px wide. Thus the debate, and the likelihood of something changing there (the browsers or the spec).
@ Wildreason: If you use :before and :after and content:, you can trick IE8 into showing at least two rounded corners via CSS alone. It’s not perfect in any way, but it is possible.
@Jeffrey Gilbert: I guess this is only for Chrome, which has problems with clipping and border-radius. Setting a border will sometimes fix this.
@DesignMango: The search terms containing CSS3, has arised a lot within the last two weeks on my site. So I guess it is reaching the “public”.
I would like to add about the support in IE8 and IE7, because there is no vendor prefixes for them. I use PIE (Progressive Internet Explorer) fir this: http://basicuse.net/articles/pl/textile/html_css/css3_progressive_internet_explorer_pie