Home1
UPDATED: Rounded Corners Using CSS3! on Wed Jun 30, 2010 6:55 pm
RockerMan
WebArtz Technician
Posts : 878
Points: 367
Age : 20
Location : Georgia
Browser:
| CSS3 Border Radius How to achive round corners with CSS only |
Rounded Corners CSS3  OK so today we are going to learn about the CSS3 property ‘border-radius’. This property adds rounded corners to the element selected. It is almost fully supported, IE 9 will have support for it. But for the time been, its Mozila and WebKit Browsers only. OK so let’s take a look at the basic code:
This is basically telling the browser to give the selected element round corners of 4 pixels. You can also select what corners to round, it is done as following: Long Version…
I think this is very self-explanatory, after the radius you have to define a corner what you would like to make rounded. In this case I have selected the Top Right and the Top Left. There are obviously 4 to choose from: topright, topleft, bottomright, bottomleft. Short Version….
This is a little more difficult, you start in the top left and work your way round clock wise. But this method pays of in the long run as it’s easier to manage. Here I have selected the top right and top left. Just remember, don't use too much CSS3 as people still in IE won't get the benefit. But subtle amounts here and there does not harm. To test these codes, you can use the WebArtz Online HTML Editor! |
| Notice : This tutorial is copyrighted by WebArtz Forum. You may not publish it on anywhere without written permission from the administrators. |
Last edited by RockerMan on Wed Jan 05, 2011 9:00 pm; edited 4 times in total
