<head>
<title></title>
<style>
.rnd
{
background: #189034; margin:50px auto;
padding: 10px;
width: 30em; /* must have a width for IE6 (not necessarily */ /*
fixed, but not "auto") */
height: auto;
position: relative; /* not necessary for Firefox/Webkit, but will be used
*/ /* in IE, so best to leave for
consistency */
-webkit-border-radius: 9px;
/* CSS3 rounded borders for Safari */
-moz-border-radius: 9px;
/* CSS3 rounded borders for Firefox */
border-radius: 9px;
}
.rnd .tr, .rnd .bl, .rnd .br
{
display: none;
}
</style>
<!--[if IE]>
<style
type="text/css">
.rnd {
background: #189034 url(rnd4.gif)
no-repeat -9px -9px;
overflow: hidden; /* fix for ie 6 */
}
.rnd .tr, .rnd .bl, .rnd .br {
position : absolute;
width: 9px;
height: 9px;
display: block;
background: transparent url(rnd4.gif)
no-repeat;
overflow: hidden; /* fix for ie 6 */
}
/* fix for IE 6 - alternatively this can be placed in an IE6 conditional
comment/css */
* html .rnd .bl, * html .rnd .br, * html .rnd .tr { margin: 0 -1px -1px
0; }
.rnd .tr { background-position: 0 -9px; top: 0; right: 0; }
.rnd .bl { background-position: -9px 0; bottom: 0; left: 0; }
.rnd .br { right: 0; bottom: 0; }
</style>
<![endif]-->
</head>
<body>
<div class="rnd">
<span class="tr"></span>If you're
viewing this page in Internet Explorer, some of
the
elements have been rebuilt by the script in Vector Markup Language (VML), an
IE-specific vector drawing language. VML supports things that are
missing from IE's
CSS
implementation like rounded corners and blur effects. <span class="bl"></span>
<span class="br"></span>
</div>
</body>
</html>
Preview:
