Skip to content

Instantly share code, notes, and snippets.

@arnabc

arnabc/CSS border-radius test

Created March 31, 2010 14:22
Show Gist options
  • Save arnabc/350379 to your computer and use it in GitHub Desktop.
Save arnabc/350379 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
CSS border-radius test
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> CSS Border Radius madness </title>
<style>
.round {
margin: 100px;
width: 250px;
height: 100px;
/* basic border styling */
border-width: 20px;
border-color: red green blue black;
border-style: solid;
/* Mozilla Firefox */
-moz-border-radius: 10px;
/* W3C, Opera and IE9 Preview */
border-radius: 10px;
/* Safari and Chrome */
-webkit-border-radius: 10px;
}
.roundTop {
margin: 100px;
border-width: 20px 1px 1px 1px;
border-color: red;
border-style: solid;
width: 250px;
height: 100px;
/* Mozilla Firefox */
-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 10px;
/* W3C, Opera and IE9 Preview */
border-top-left-radius: 10px;
border-top-right-radius: 10px;
/* Safari and Chrome */
-webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 10px;
}
.roundBottom {
margin: 100px;
border-width: 1px 1px 20px 1px;
border-color: red;
border-style: solid;
width: 250px;
height: 100px;
/* Mozilla Firefox */
-moz-border-radius-bottomleft: 10px;
-moz-border-radius-bottomright: 10px;
/* W3C, Opera and IE9 Preview */
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
/* Safari and Chrome */
-webkit-border-bottom-left-radius: 10px;
-webkit-border-bottom-right-radius: 10px;
}
.roundLeft {
margin: 100px;
border-width: 1px 1px 1px 20px;
border-color: red;
border-style: solid;
width: 250px;
height: 100px;
/* Mozilla Firefox */
-moz-border-radius-topleft: 10px;
-moz-border-radius-bottomleft: 10px;
/* W3C, Opera and IE9 Preview */
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
/* Safari and Chrome */
-webkit-border-top-left-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
}
.roundRight {
margin: 100px;
border-width: 1px 20px 1px 1px;
border-color: red;
border-style: solid;
width: 250px;
height: 100px;
/* Mozilla Firefox */
-moz-border-radius-topright: 10px;
-moz-border-radius-bottomright: 10px;
/* W3C, Opera and IE9 Preview */
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
/* Safari and Chrome */
-webkit-border-top-right-radius: 10px;
-webkit-border-bottom-right-radius: 10px;
}
</style>
</head>
<body>
<div id="box" class="roundRight"></div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment