WebArtz - The Web Design Forum
Welcome to WebArtz, Guest!

WebArtz is a nice place for discussions related to web designing and coding. We help our members to code their own website templates with HTML and CSS. We give them advice on various issues.

To know more about WebArtz Forum, visit the About Us page.

At the moment, you are viewing the forum as a guest. As a guest you can't make post and participate in discussions. You need to register and become a member of the forum. Click the register link below and become a part of this forum.

Thank You

WebArtz - The Web Design Forum
Welcome to WebArtz, Guest!

WebArtz is a nice place for discussions related to web designing and coding. We help our members to code their own website templates with HTML and CSS. We give them advice on various issues.

To know more about WebArtz Forum, visit the About Us page.

At the moment, you are viewing the forum as a guest. As a guest you can't make post and participate in discussions. You need to register and become a member of the forum. Click the register link below and become a part of this forum.

Thank You


You are not connected. Please login or register

WebArtz - The Web Design Forum » Web Designing & Coding » Tutorials » UPDATED: Rounded Corners Using CSS3!

View previous topic View next topic Go down  Message [Page 1 of 1]

1Accespted UPDATED: Rounded Corners Using CSS3! Wed Jun 30, 2010 8:25 pm

RockerMan

RockerMan
Technician
Technician
CSS3 Border Radius
How to achive round corners with CSS only


Rounded Corners CSS3
UPDATED: Rounded Corners Using CSS3! Compch10

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:
Code:

-moz-border-radius: 4px;  /*This is for Mozilla*/
-webkit-border-radius: 4px; /*This is no longer mandatory but still worth putting it in*/
border-radius: 4px; /*This is for IE9, Chrome and other webkit browsers*/

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…
Code:

-moz-border-radius-topright: 4px;
-moz-border-radius-topleft: 4px;
-webkit-border-radius-topright: 4px;
-webkit-border-radius-topleft: 4px;
border-radius-topright: 4px;
border-radius-topleft: 4px;
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….
Code:

-moz-border-radius:  4px 4px 0px 0px;
-webkit-border-radius:  4px 4px 0px 0px;
border-radius:  4px 4px 0px 0px;
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 10:30 pm; edited 4 times in total

http://www.graphics-post.com/

2Accespted Re: UPDATED: Rounded Corners Using CSS3! Wed Jun 30, 2010 8:43 pm

Unknown Data

Unknown Data
Registered Member
Registered Member
Sure it working with all browsers? Because my box corners didn't got rounded.

By the way, very cool tutorial. Smile

http://woops.dk

3Accespted Re: UPDATED: Rounded Corners Using CSS3! Wed Jun 30, 2010 8:49 pm

ankillien

ankillien
Administrator
Administrator
UD, rounded corners will work on all popular browsers but IE.

Nice tutorial Mike Very Happy

4Accespted Re: UPDATED: Rounded Corners Using CSS3! Wed Jun 30, 2010 9:12 pm

RockerMan

RockerMan
Technician
Technician
I have added a compatibility chart at the top of the post Smile

Thanks for the feedback both of you Smile

http://www.graphics-post.com/

5Accespted Re: UPDATED: Rounded Corners Using CSS3! Wed Jun 30, 2010 11:15 pm

Krazy


Registered Member
Registered Member
Nice tutorial, is that your compatibility chart Rocker?


I love using this effect.

6Accespted Re: UPDATED: Rounded Corners Using CSS3! Wed Jun 30, 2010 11:16 pm

RockerMan

RockerMan
Technician
Technician
Yes it is and thank you Smile

http://www.graphics-post.com/

7Accespted Re: UPDATED: Rounded Corners Using CSS3! Wed Jun 30, 2010 11:17 pm

Krazy


Registered Member
Registered Member
Your welcome. So you do graphics in Photoshop also?

8Accespted Re: UPDATED: Rounded Corners Using CSS3! Thu Jul 01, 2010 9:16 am

ankillien

ankillien
Administrator
Administrator
Thanks for your contribution, Mike Very Happy

Tutorial Accepted

9Accespted Re: UPDATED: Rounded Corners Using CSS3! Thu Jul 01, 2010 3:09 pm

Guest


Guest
Hmmm Mike i know a more simple CSS3 code for these Smile
I will post it but sorry i cant today i will be absent until Sunday.

10Accespted Re: UPDATED: Rounded Corners Using CSS3! Thu Jul 01, 2010 3:18 pm

ankillien

ankillien
Administrator
Administrator
Cool-Processor wrote:Hmmm Mike i know a more simple CSS3 code for these Smile
I will post it but sorry i cant today i will be absent until Sunday.

I don't think there is a simper code for rounded corners Rolling Eyes

11Accespted Re: UPDATED: Rounded Corners Using CSS3! Thu Jul 01, 2010 4:14 pm

Guest


Guest
i think there is...and i will find it somewhere Razz
i will also post onother ways of rounded corners,like making only the right side rounded etc.

12Accespted Re: UPDATED: Rounded Corners Using CSS3! Thu Jul 01, 2010 9:12 pm

ankillien

ankillien
Administrator
Administrator
There are other methods of getting rounded corners but they are not simpler Razz

Here are ways to make specific corner rounded, not all...

selector{
-moz-border-radius-topright : 10px;
-webkit-border-radius-topright : 10px;
}

Replace the topright with any corner you want to make rounded. Eg : topright, topleft, bottomright, bottomleft.

13Accespted Re: UPDATED: Rounded Corners Using CSS3! Thu Jul 01, 2010 10:30 pm

RockerMan

RockerMan
Technician
Technician
There are a few ways to get rounded corners, you could use images in a table. But this is alot more practical...

Like ankillien said above, to get rounded corners on a specific edge you just add what corner you would like to make rounded Smile

http://www.graphics-post.com/

14Accespted Re: UPDATED: Rounded Corners Using CSS3! Fri Jul 02, 2010 5:09 pm

Jophy

Jophy
Registered Member
Registered Member
Thanks for sharing a tutorial RockerMan Wink

http://www.socialtechforum.com/

15Accespted Re: UPDATED: Rounded Corners Using CSS3! Wed Jan 05, 2011 4:47 am

RockerMan

RockerMan
Technician
Technician
Updated tutorial to match current conditions Smile

Thanks

http://www.graphics-post.com/

Sponsored content


View previous topic View next topic Back to top  Message [Page 1 of 1]

WebArtz - The Web Design Forum » Web Designing & Coding » Tutorials » UPDATED: Rounded Corners Using CSS3!

Permissions in this forum:
You cannot reply to topics in this forum