<html> | |
<head> | |
<style type="text/css"> | |
span { | |
display: inline-block; | |
width: 40px; | |
height: 40px; | |
margin: 4px; | |
border-width: 40px; | |
border-color: #f00; | |
} | |
/* the different border-radii styles defined in CSS3 */ | |
#radius { | |
border-radius: 20px; | |
} | |
#topleft { | |
border-top-left-radius: 20px; | |
} | |
#topright { | |
border-top-right-radius: 20px; | |
} | |
#bottomright { | |
border-bottom-right-radius: 20px; | |
} | |
#bottomleft { | |
border-bottom-left-radius: 20px; | |
} | |
#inset span { | |
border-style: ridge; | |
} | |
#outset span { | |
border-style: outset; | |
} | |
</style> | |
</head> | |
<body> | |
<div id="inset"> | |
<span id="radius"></span> | |
<span id="topleft"></span> | |
<span id="topright"></span> | |
<span id="bottomleft"></span> | |
<span id="bottomright"></span> | |
</div> | |
<div id="outset"> | |
<span id="radius"></span> | |
<span id="topleft"></span> | |
<span id="topright"></span> | |
<span id="bottomleft"></span> | |
<span id="bottomright"></span> | |
</div> | |
</body> | |
</html> |