Tuesday, November 8, 2011

CSS Rounded Corners for IE also

Supported Browsers:
- Internet Explorer
- Firefox
- Safari
- Chrome
- Opera


Add this to your CSS Class:
You can change the radius of the rounded corners - for example: 20px; 30px; 40px;



-moz-border-radius: 20px;
-webkit-border-radius: 20px;
-khtml-border-radius: 20px;
border-radius: 20px;



Additional, add this code between your head tags:
And put this file: curvycorners.src.js in the root folder.



<script type="text/JavaScript" src="curvycorners.src.js"></script>



Example - The CSS code should look like this:
.frame { width:700px; background-color:#fff; background-position:right; margin-left:25px; padding-left:50px; padding-bottom:20px; font-family:Georgia, "Times New Roman", Times, serif; font-size:14px; padding-top:10px; -moz-border-radius: 20px; -webkit-border-radius: 20px; -khtml-border-radius: 20px; border-radius: 20px; }


HTML Markup:
<div class="frame"> Text Goes here... </div>

No comments:

Post a Comment