carol♥z-motion
aquila♥(inky);paper
map♥swordmanspirit
CSS tutorials: Rounded corners
Level:
If you take a tour on Grieved-Lightness and have a look at the avatars or webdesign pages you'll notice that all numbers of the pages are encircled by rounded rectangles. Actually these are normal rectangles but with a trick you can add some radius.
1. Creating an object
First of all you need to create an object that should be surrounded by those rounded corners. To make things more clear I'll do this with an ordinary text link which looks like this:<a href="link.html" class="rcorner">I'm the most beautiful link you've ever seen</a>
<a href="link.html" class="rcorner">Me, too.</a>
2. Definitions within CSS
Since we have a class-attribute (class="rcorner") here we need to define it somewhere in the related CSS-document (1). To do so open up your stylesheet and create a class which is called "rcorner". Remember that for a link we need to define attributes for different states: static, visited, active and hover (2). In addition we need to define some basic definitions, too (2+). Then your link should look simlar to the rectangle in the examplary image above.(1) .rcorner{}
(2) a.rcorner, a.rcorner:visited, a.rcorner:active, a.rcorner:hover
{
background-color:#464646; // backround color (I guess...)
color:#ebebeb; // font color
text-align:center; // text alignment
line-height:15px; // space occupied by text
padding:3px 6px 3px 6px; space between font and outer corner
text-decoration:none; // text decoration like bold, italic or underline
text-transform:none; // text transformation means uppercase or lowercase
}
3. Make your corners go-round
The problem with such effects is the differences between browsers. Sometime it works sometimes not. To make your rounded corner work on nearly all web-browsers we need to add the following lines to the definitions (2) which comprehend attributes for different browsers.border-radius:3px;
-moz-border-radius:3px; // Mozilla Firefox and Netscape
-webkit-border-radius:3px; // Safari and Google Chrome
-khtml-border-radius:3px; // Safari and Konqueror
Even though this effect is pretty nice it isn't W3C valid and will conjure up some unlovely errors. Unfortunately border-radius won't be displayed in Opera (10+) anymore ;_:
last updated on February 4, 2010
⬅ GO BACK
general |
|
style selection |
|
broad your mind |
|
creative aids |
|
