Instead of having to use up to four separate images to give the illusion of a curved shape on your website, with CSS3 you can now create containers with curved corners! Here’s the code, which has the fully supported CSS3 declaration at the top followed by prefixed duplicates for other browsers:
#box {
border-radius: 20px;
/* for Mozilla Firefox */
-moz-border-radius: 20px;
/* for Safari & Google Chrome */
-webkit-border-radius: 20px;
}
You can use the border-radius style on any object including rectangular images. The bigger the number of pixels, the rounder the edge.
Before CSS3, if you wanted to have multiple columns on your page you’d need to either float elements within containers or position them absolutely relative to a parent container. Now, with CSS3, you can easily create multiple columns within a single container using the column property by setting the values for column number and gap width, either with or without a vertical rule between them.
#box1 {
/* for browsers not requiring a prefix */
column-count: 4;
column-gap: 30px;
column-rule: 3px solid #fff;
/* for Mozilla Firefox */
-moz-column-count: 4;
-moz-column-gap: 30px;
-moz-column-rule: 3px solid #fff;
/* for Safari & Google Chrome */
-webkit-column-count: 4;
-webkit-column-gap: 30px;
-webkit-column-rule: 3px solid #fff;
}
The illustration shows a comparison of one layer using the multicolumn style and another layout without columns. For more information about how you can further control the look of your multiple columns, see Quirksmode.
