<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Chroma Corners Example</title>
<style type="text/css">
body {
background: #000 url(http://farm5.static.flickr.com/4067/4489485744_3bba4c17a3_o.jpg) no-repeat center center;
font-family: Calibri, 'Lucida Grande', Arial, Verdana, sans-serif;
}
div {
width: 70%;
height: 300px;
margin: 20px;
padding: 20px;
background: #48003F url(http://farm4.static.flickr.com/3343/3594013970_41f9cfe4f9_o.jpg) no-repeat left center;
color: white;
}
.borderradius1 {
-moz-border-radius: 14px;
-webkit-border-radius: 14px;
border-radius: 14px;
behavior: url(chromacorners.htc); /* relative path from HTML-file! */
}
.borderradius2 {
-moz-border-radius: 24px 4px;
-webkit-border-radius: 24px 4px;
border-radius: 24px 4px;
behavior: url(chromacorners.htc); /* relative path from HTML-file! */
}
.borderradius3 {
-moz-border-radius: 14px 4px 24px 34px;
-webkit-border-radius: 14px 4px 24px 34px;
border-radius: 14px 4px 24px 34px;
behavior: url(chromacorners.htc); /* relative path from HTML-file! */
}
.borderradius4 {
-moz-border-top-left-radius: 14px;
-webkit-border-top-left-radius: 14px;
border-top-left-radius: 14px;
behavior: url(chromacorners.htc); /* relative path from HTML-file! */
}
.borderradius5 {
-moz-border-radius: 14px;
-webkit-border-radius: 14px;
border-radius: 14px;
border: white 2px solid;
behavior: url(chromacorners.htc); /* relative path from HTML-file! */
}
</style>
</head>
<body>
<div class="borderradius1">border-radius: 14px;</div>
<div class="borderradius2">border-radius: 24px 4px;</div>
<div class="borderradius3">border-radius: 14px 4px 24px 34px;</div>
<div class="borderradius4">border-top-left-radius: 14px;</div>
<div class="borderradius5">border-radius: 14px; border: white 1px solid;</div>
</body>
</html>