Rounded Corners using css with all browser support
Introduction:
Almost all the websites use rounded corners for an element of a web page. It is done mostly by images with rounded corners. And then most of the websites started using css properties like -moz-border-radious, -webkit-border-radius, and border-radious for rounded corners. But these properties supported only a few browsers like mozilla, chrome, etc. Browsers like Internet Explorer’s all versions except version 9 did not support rounded corners. because they dont support css 3. So the rounded corner using css was incomplete. Most developers still use images for rounded corners.
To make the rounded corner using css to support all the browsers, we found a way to make all the unsupported browsers to support css 3. In this tutorial we will discuss about it.
The HTML page looks like the following,
<html lang="en"> <head> <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1"> <title>Rounded Corners using css</title> </head> <body> <div class="box"> <div>Rounded Corners using css. Which supports all the browsers including internet explorer browsers. </div> </div> </body> </html>
Here we have a box which contains some text. The goal is to make the box rounded corner using css. we do it by the following css.
<style type="text/css"> .box { width: 300px; height: 150px; border: 1px solid #c6ac6c; -moz-border-radius: 20px; -webkit-border-radius: 20px; border-radius: 20px; behavior: url(ie-css3.htc); } </style>
Here the box css properties will set width and height of the box and a border for the box, then we have used rounded corner properties like -moz-border-radius, -webkit-border-radius, and border-radius to make rounded corner box. But for the browsers, which does not have support of css 3, we used .htc file. This ie-css3.htc file will make the IE browsers to support css 3.
