Skip to content

Instantly share code, notes, and snippets.

@xelipe

xelipe/border-radius.html

Created July 5, 2012 01:53
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save xelipe/3050511 to your computer and use it in GitHub Desktop.
Save xelipe/3050511 to your computer and use it in GitHub Desktop.
Download ZIP
Example of using border-radius CSS attribute.
Raw
border-radius.html
<html>
<head>
<style type="text/css">
.box {
width: 100px;
height: 100px;
float:left;
}
.red {
background: red;
}
.orange {
background: orange;
}
.green {
background: green;
}
.purple{
background: purple;
}
</style>
</head>
<body style='margin: 100px'>
<div class='box green' style='border-radius: 0px 60px 40px 60px;'></div>
<div class='box red' style='border-radius: 50px 75px 0px 75px;'></div>
<div class='box orange' style='border-radius: 75px 50px 75px 0px;'></div>
<div class='box red' style='border-radius: 100px 0px 0px 0px;'></div>
<div class='box orange' style='border-radius: 0px 100px 0px 0px;'></div>
<br style='clear:both' />
<div style='background: red; width: 100px; height: 100px; border-radius: 50px; float:left;'>
<div style='background: purple; width: 80px; height: 80px; border-radius: 40px ; float:left; margin-left: 10px; margin-top: 10px'>
<div style='background: red; width: 60px; height: 60px; border-radius: 30px; float:left; margin-left: 10px; margin-top: 10px'>
<div style='background: purple; width: 40px; height: 40px; border-radius: 20px; float:left; margin-left: 10px; margin-top: 10px'></div>
</div>
</div>
</div>
<div class='box green' style='border-radius: 75px 0px 75px 50px;'></div>
<div class='box purple' style='border-radius: 0px 75px 50px 75px;'></div>
<div class='box green' style='border-radius: 0px 0px 0px 100px;'></div>
<div class='box purple' style='border-radius: 0px 0px 100px 0px;'></div>
<br style='clear:both' />
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment