I have shared a comprehensive knowledge about CSS Rules and CSS Browser Specific Properties. Now, i am going to write tutorial about amazing, awesome and new CSS3 properties. I know, most of them are still vendor specific but their usage can enhance the beauty and usability of your projects. It is also a good reason to learn the future of CSS3.
1. CSS3 Border Radius
border-radius seems to be a hot topic these days, what with CSS3 including it and some browser vendors already implementing it. I just think it looks nice. You may be interested to know more about CSS3 border radius.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>CSS3 Border Radius</title>
<style>
.box {
/*
|-------------------
| Box Style
|-------------------
*/
background-color:#F00;
color:#FFF;
width: 200px;
height: 50px;
line-height: 50px;
text-align: center;
/*
|-------------------
| Border Radius
|-------------------
*/
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
</style>
</head>
<body>
<div class="box">Box with Border Radius</div>
</body>
</html>