Some of you may have noticed that on the main Systematix site a lot of the boxes used have slightly rounded corners. This is not done by using any images whatsoever. It is achieved by using some exiting new CSS parameters that the latest browsers are starting to adopted. These new options will form part of CSS3. The full release of CSS3 is still quite far off but it promises make a big impact on improving the way we can build our sites. For the moment though we can make use of the functionality, added by the early adopting browsers such as Firefox, Chrome and Safari. Systematix also provide HTML and CSS training courses.
To create the corners the following lines and put into the CSS
pre {
border:1px #fff solid;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
}
Or you can control each corner individually using the following.
pre {
border:1px #fff solid;
-moz-border-radius-topleft: 8px;
-moz-border-radius-topright: 0px;
-moz-border-radius-bottomright: 8px;
-moz-border-radius-bottomleft: 0px;
-webkit-border-top-left-radius: 8px;
-webkit-border-top-right-radius: 0px;
-webkit-border-bottom-left-radius: 0px;
-webkit-border-bottom-right-radius: 8px;
}
It is important to make sure that a website is suitable for a range of browsers. So using this as key part of your design is not recommended yet, but for those who are using the latest browsers it can enhance the experience.