Rounded Corners
Starting with CSS3
At the moment CSS3 is in a transitional stage. Browsers will constantly need to be updated in order to stay current. Outdated browsers will still be the choice of some users. In the meantime we will need to pick and choose which elements of CSS3 we would like to incorporate into our sites. A very easy place to start is rounded corners.
User's Choice
Designers should no longer be worried about whether or not all users get exactly the same experience. As long as we make sure that they all get the same information and when necessary the technology they need to complete a task we can go ahead with incorporating some of the new bells and whistles knowing that they will not be seen by all. We have spent too long designing for the capabilities of the lowest common denominator (e.g: IE6). The user experience should now be determined by the user's choice of browser ( see Andy Clarke's book Transcending CSS). If the user wants a first class experience they need to use a first class browser. It's theirs for the downloading.
Before You Start
While we are in the transional stage we will need to add some additional code to the Css. We will be using the terms "moz" and "webkit" to expand the list of browsers that will be able to read our code, "moz" is for Firefox and the moziller family of browsers, "webkit" is an Open Source Browser Engine use for Safari and Crome.
You Have to Start Somewhere
So lets start with rounded corners. The rounded effect will not appear in all browsers but browsers that cannot read the effect will just ignore it, there will not be any distortion.
Rounded Corners
.corners {
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
}
And place the class in the div tag.
The Unicorn
A long time ago, when the earth was green
and there was more kinds of animals than you've ever seen,
and they run around free while the world was bein' born,
and the lovliest of all was the Unicorn...
Shel Silverstein
from the book "Where the Sidewalk Ends" (1974)
Inconsistent Corners
The Unicorn
A long time ago, when the earth was green
and there was more kinds of animals than you've ever seen,
and they run around free while the world was bein' born,
and the loveliest of all was the Unicorn...
Shel Silverstein
from the book "Where the Sidewalk Ends" (1974)
.corners{
-moz-border-radius: 30px 8px 40px 5px;
-webkit-border-top-left-radius: 30px;
-webkit-border-top-right-radius: 8px;
-webkit-border-bottom-right-radius: 50px;
-webkit-border-bottom-left-radius: 5px;
border-radius: 30px 8px 50px 5px;
}
And place the class in the div tag.
From Thumbnails to Buttons
Not so many browsers read rounded corners on images. The thumbnails are round in Crome and Safari but they are still just rectangles in the other browsers.
.imageCorners {
-moz-border-radius: 35px;
-webkit-border-radius: 35px;
}
And place the class in the image tag.
