Not interested in the explanation? Head straight to the example page.
Now you can create rounds corners easily using CSS. There is a bit of variance between browser vendors at the moment but I imagine eventually the syntax will standardise. To add rounded corners you just need:
/* Gecko browsers */ -moz-border-radius: 5px; /* Webkit browsers */ -webkit-border-radius: 5px; /* W3C syntax - likely to be standard so use for future proofing */ border-radius:10px;
And that’s all there is to it. Firefox did have some problems aliasing the corners but this has been fixed now so you can enjoy crisp rounded corners with no effort.
You can even specify which corners have border-radius applied to them. Again the syntax is slightly different between browsers so you’ll need to list both.
/* Gecko browsers */ -moz-border-radius-topleft: 20px; -moz-border-radius-topright: 0; -moz-border-radius-bottomleft: 0; -moz-border-radius-bottomright: 20px; /* Webkit browsers */ -webkit-border-top-left-radius: 20px; -webkit-border-top-right-radius: 0; -webkit-border-bottom-left-radius: 0; -webkit-border-bottom-right-radius: 20px; /* W3C syntax */ border-top-left-radius: 20px; border-top-right-radius: 0; border-bottom-right-radius: 0; border-bottom-left-radius: 20px;
True - this won’t validate with CSS 2.1 validators simply becuase this isn’t CSS 2.1. If you are a validation obsessive then I suggest putting these rules in a separate CSS3 file. If you can’t handle having *any* non-validating code on your site then you’d better wait a bit longer.
Border-radius is supported in Firefox 2 & 3, Safari 3 and related Gecko and Webkit browsers.
Internet Explorer 6 & 7 and 8 (as far as I know) and Opera do not support rounded corners. Instead these users will see a regular corner.
For me this is an example of progressive enhancement. So what are you waiting for?
You can see the effects that are available in the demo, or grab the source from Github.
Have an update or suggestion for this article? You can edit it here and send me a pull request.
Listening to BBC Radio with mpv
The BBC publishes high quality 320 kbps HLS AAC streams that can be used to listen to radio from the command-line using mpv. Here are the URLs and some aliases to start listening quickly.
Vim: So long Pathogen, hello native package loading
Vim 8 added a native way to load third-party packages. This means, for me at least, there is no longer any need to use a third party plugin helper like Pathogen.
Linux and Unix more command tutorial with examples
Tutorial on using more, a UNIX and Linux command for viewing the contents of a file or files one screen at a time. Examples of viewing a file, viewing multiple files, searching using regular expressions and opening the file in a text editor.