Cascading Style Sheets are a necessity for building well-formatted web sites. As CSS3 rolls out, you can add graphical elements to your page that you couldn’t do before with CSS, as we’ll show in this tutorial for the web developer.
Consistent formatting across a site shows a level of professionalism that visitors appreciate. Eyebrows are raised and question marks appear when one page is jarringly different from another. If a site uses different fonts and styles from page to page, then the visitor never gains a sense of familiarity with the site, and they might be quick to move on. CSS started primarily as a means to format text. Then it became popular to create page layouts with CSS as opposed to using tables.
We mentioned that you can add graphical elements to your page using CSS3 that were previously unavailable using CSS. A great example is the ability to add rounded corners to boxes–in the past you had to rely on using several different graphic images to create the effect.
According to the CSS Wikipedia page, level 3 is still currently under development. The W3C has split CSS3 into different modes. This allows for modules to reach the Recommendation level at different rates. As of this writing, no CSS3 module has yet reached Recommendation status. But there are some implementations you can start using now.
Web sites, for the most part, are still mostly made up of boxes of information. How those boxes are formatted can make the difference between a wall of text with a few scattered images and a work of art. One of the best features of CSS3 is the ability to format boxes, or even more importantly, headers.
So How Do You Create Rounded Corners Using CSS?
The following code shows how to create a box, with rounded corners, without using one single image file. This type of code couldn’t be done five years ago.
<div style=" background-color: #ccc; -moz-border-radius: 5px; -webkit-border-radius: 5px; border: 1px solid #000; padding: 10px;" >
This works in Chrome and Firefox but not Internet Explorer (that browser displays square corners). This was not tested, but it should work in Safari 3 as well. The code as it is presented above displays a gray background, rounded corners and a thin, black border. You can place this directly in your HTML code. All of the text that appears after this code will appear inside the box until the next </div>.
To change the degree of just how round the corners are, you can experiment with changing the radius numbers. For example, try changing it from 5px to 50px.
To change the height of the box, experiment with changing the padding value.
Use the following modifiers to determine if each corner should be rounded or square. For example, you might want only the top corners to be round and the bottom corners to be square.
-moz-border-radius-topleft / -webkit-border-top-left-radius
-moz-border-radius-topright / -webkit-border-top-right-radius
-moz-border-radius-bottomleft / -webkit-border-bottom-left-radius
-moz-border-radius-bottomright / -webkit-border-bottom-right-radius
To add this into your CSS file, tweak the code to this:
#roundcorner {
background-color: olive;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border: 1px solid #000;
padding: 1px;
}
The purpose of a CSS is to update a style one location to allow for global changes. If your web site consists of hundreds or thousands of pages and suddenly you want all of your <h2> tags to have round corners then it would take a very long time to go back and reopen each and every page to add in the <div id=”roundcorner”> right before each <h2> tag. This leads us to the million-dollar question: can you add this code to a currently existing tag, such as an <h1> or <h2>? The answer is, Yes!
H2 {
text-align:left; color:black; font: italic 12pt "Verdana";
background-color: olive;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border: 1px solid #000;
padding: 10px;
}
Congratulations. You just created a round corners effect with five lines of code. Back in the day, that would have required a complicated table, at least three different image files and a ton of code. Things are only getting better!
