Marcus' CSS3 Tutorials 1 - border-radius

[Marcus]

So, you have your site, it might be a layout similar to Exilian, or it might be different. Anyway, you come to a point where you may want to have boxes with content, and those square corners look so... 90s. So you look up how to make them rounded.

Before CSS3, one had to use images to mimic the rounded corners and it got somewhat complicated. Now, however you can use a simple bit of CSS to do the job for you:

Here is a code snippet for border radius:

Code Select Expand


border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;


The basic code is 'border-radius: 10px;', but different browsers work with different code. Firefox will work with the '-moz' prefixed code, Safari and Chrome will work with the '-webkit' prefixed code, and the latest Opera alpha, 10.5 will work with the unprefixed code.

If you only want a certain corner to be rounded, you can do that with the code as well:

Code Select Expand


border-bottom-left-radius: 10px;
-moz-border-radius-bottomleft: 10px;
-webkit-border-bottom-left-radius: 10px;


The webkit and unprefixed lines are fairly similar, while the mozilla code is different. This code will give a box a rounded bottom left corner only, but it is simple to change it for other corners, just exchange 'bottom' for 'top' and 'left' for 'right'. Simple.

This is just a basic tutorial on border radius, you can do more complicated effects, but not all browsers support them yet, so this tutorial won't cover them.

You may be wondering: 'Where is IE in all this?' Unfortunately, as of IE 8, IE has poor support for CSS3 and does not support border-radius. I will be making a tutorial soon however, which will cover how to do it in IE using images.

Good luck and EXPERIMENT. You learn most by just trying things out, seeing what works and what doesn't, rather than just following a textbook. Enjoy.