-
201011 Aug
Posted in CSS3 Previews, Site Updates
The border-radius page in our CSS3 Preview section has been updated to reflect the latest version of the Backgrounds & Borders specification and the latest browser support.
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.
-
Comments
-
01.
tuyisingize alfred says:Comment » August 11th, 2010 at 3:52 pm
it is very well
-
02.
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.
-
03.
Brad (Kemper) says:Comment » August 11th, 2010 at 4:55 pm
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.
-
04.
I still don’t understand why you can’t have a 0 width border and a rounded corner. It makes no sense.
-
05.
You can have a 0 width border and rounded corners, this is in fact the case in every demo on the preview page.
Thanks for the tip Brad, i’ll update the demo code.
-
06.
Brad Kemper says:Comment » August 11th, 2010 at 10:59 pm
You’re welcome.
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.
-
07.
-
08.
-
09.
I belive
border-radius: 15px; (works only for Opera)
-moz-border-radius: 15px; (works only for Mozilla Firefox)
and for Safari and Chrome it is
-webkit-border-radius:15px;
So we need to include all three codes.
There is no border radius style for IE8 and below. They might add it in IE9
-
10.
Sandeep, Safari/Chrome (webkit) version 5 now support border-radius without the -webkit- prefix.
-
11.
-
12.
I’m happy IE9 will be supporting some of the sought after features of CSS3. Too bad 7 and 8 won’t be updated.
-
13.
how about adding examples on cycle border and varied border raidii? It can show various implementation among browsers
-
14.
Hello, when are you updating the box-shadow article? W3 also updated the documentation and syntax of that.
-
15.
Brad (Kemper) says:Comment » August 16th, 2010 at 6:23 pm
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).
-
16.
In Firefox, Safarie and Chrome works the border very well, but in IE 6,7 u. 8 it is sh**.
Speak to all IE user!! Download another browser plz !! ;-)
-
17.
-
18.
-
19.
CSS3 is starting to get really interesting!
-
20.
Rune Jensen says:Comment » August 25th, 2010 at 4:38 pm
@ 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”.
-
21.
i really love css 3 it makes the things really really easy and simple… if IE supports css 3 in the near future. this will be really great too…
the best part of css 3 is ; the roundboxes… it really helps the designers…
-
22.
Stebs says:Comment » September 10th, 2010 at 7:44 pm
Firefox Nightlys are now fully standards compliant and use border-radius: now.
BTW, Using SVG with img Tag and as CSS background is now possible too, Beta6 will be very nice.
-
23.
i think this is very well but i want to know alternative way to fix in ie6. this is possible!
-
24.
What about the KHTML (Konqueror)? khtml-border-radius, or does knoquerer now also support the non-prefixed version??
-
25.
CSS3 you saved my life!! ah.. from lots of wasted time.
-
26.
-
27.
-
28.
css3 says:Comment » February 6th, 2011 at 2:05 pm
Yes – take a look at examples Q and R in our box-shadow tutorial – http://www.css3.info/preview/box-shadow/
-
29.
border-radius give us a better live,and your blog give me a new knownlege
-
30.
-
31.
Awesome! That’s a great recourse for everything border-radius!
-
32.
-
33.
Adam Moore says:Comment » December 4th, 2013 at 3:18 pm
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
-
01.
