CSS3 contains new features that allow you to create rounded borders, add shadow to boxes, and use an image as a border.
border-radius
property allows you to easily create rounded corners in your design elements, without the need for corner images or the use of multiple div tag.<style> #id1 { width:300px; height:120px; border:2px solid blue; border-radius:28px; padding:4px 4px 2px 10px; } </style> <h4>Example border-radius</h4> <div id='id1'> CSS Course - coursesweb.net</div>
border-*-radius
properties ( border-top-left-radius, border-top-right-radius, border-bottom-right-radius, and border-bottom-left-radius ).<style> #id1 { width:300px; height:120px; background-color:#bbfeda; border:2px solid blue; border-top-left-radius:20px; border-bottom-right-radius:38px; padding:4px 4px 2px 10px; } </style> <h4>Example border-*-radius</h4> <div id='id1'> CSS Course - coursesweb.net</div>
box-shadow
property is used to add shadow to boxes. It is supported in IE9+, Firefox 4, Chrome, and Opera.<style> #id1 { width:300px; height:120px; background-color:#bbfeda; box-shadow: 11px 11px 5px #7878da; padding:4px 4px 2px 10px; } </style> <h4>Example box-shadow</h4> <div id='id1'> CSS3 box-shadow, coursesweb.net/css</div>
border-image
property you can use an image to act as an element's border.border-image
properly, you must specify also the border
property with transparent color.<style> #id1 { width:200px; height:120px; border: 12px solid transparent; border-image:url('css/border_image.png') 30 30 round; } #id2 { width:200px; height:120px; border: 15px solid transparent; border-image:url('css/border_image.png') 30 30 stretch; } </style> <h4>Example border-image</h4> <div id='id1'> CSS3 border-image, with round</div><br> <div id='id2'> CSS3 border-image, with stretch</div>
<nav><ul> <li><a href="http://coursesweb.net/css/" title="CSS Course">CSS Course</a></li> <li><a href="http://www.marplo.net/jocuri/" title="Flash Games">Flash Games</a></li> </ul></nav>
.some_class { width: 30%; float: left; }
var num = 12.34567; num = Math.floor(num); alert(num); // 12
$str = "string with utf-8 chars åèö"; $nrchr = mb_strlen($str); echo $nrchr; // 30