CSS3 Rounded Corners - with Examples

Go down

Tutorial CSS3 Rounded Corners - with Examples

Post by Mati™ on Tue Apr 17, 2012 2:20 pm

In this simple tutorial I will show you how to make rounded corners using css without images.

The CSS3 standard property for applying rounded corners is border-radius. This property is added to any elements.

Example: 1
.yourclass {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;

With this code you can change top-left, top-right, bottom-right, bottom-left corners.

Example: 2
.yourclass {
-webkit-border-radius: 0 5px 0 5px;
-moz-border-radius: 0 5px 0 5px;
border-radius: 0 5px 0 5px;

Or shortcut for top-left, top-right, bottom-right, bottom-left.

Example: 3
.yourclass {
border-radius: 5px 5px 5px 5px;

With this code you can easy create round corners and border based rounded corner. Just customize the code to change the border-color and background-color if needed.

Hope you guys like this. Also please don't forget to drop your comments.

Age : 32
Posts : 2113
Join date : 2011-10-20
Forum Version : PhpBB3
Reputation : 147

View user profile http://fmfocus.forumotion.net/forum

Back to top Go down

Tutorial Re: CSS3 Rounded Corners - with Examples

Post by Duke on Sat Jan 10, 2015 1:38 pm

Good Work My Bro

Age : 28
Posts : 7
Join date : 2015-01-10
Forum Version : PunBB
Reputation : 2

View user profile

Back to top Go down

Back to top

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