**گرد کردن گوشه های باکس ها قبل از css3 توسط تصاویر انجام میشد که گوشه هارو به صورت تصویر طراحی و قرار میدادند ولی با امدن css3 کدی رو در اختیار شما قرار میده به نام border-radius که این گزینه این امکان رو میده که باکس های خود را گوشه هاشو گرد کنید میتونید هر کدوم از گوشه ها رو که خاستید گرد کنید ..
**
<html>
<head>
<meta charset="utf-8">
<style>
body {
background: #EEE
font-family: arial, helvetica, sans-serif;
margin: 0;
padding: 0;
}
#wrapper {
width: 960px;
margin: 0 auto;
}
.mydiv {
margin: 60px auto;
width: 400px;
height: 400px;
background-color: #ff9900
}
#myDiv1 {
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
}
#myDiv2 {
-webkit-border-top-left-radius: 50px;
-webkit-border-bottom-right-radius: 50px;
-moz-border-radius-topleft: 50px;
-moz-border-radius-bottomright: 50px;
}
#myDiv3 {
-webkit-border-radius: 5px 200px 30px 50px;
-moz-border-radius: 5px 200px 30px 50px;
}
#myDiv4 {
-webkit-border-radius: 100px / 30px;
-moz-border-radius: 100px / 30px;
}
#myDiv5 {
-webkit-border-radius: 300px;
-moz-border-radius: 300px;
}
#myDiv6 {
border-radius: 50px;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="myDiv1" class="mydiv"></div>
<div id="myDiv2" class="mydiv"></div>
<div id="myDiv3" class="mydiv"></div>
<div id="myDiv4" class="mydiv"></div>
<div id="myDiv5" class="mydiv"></div>
<div id="myDiv6" class="mydiv"></div>
</div>
</body>
</html>