Ecken um 10px abgerundet
.box {
-moz-border-radius: 10px;
border-radius: 10px;
}
Obere Ecken abgerundet um 20px
.box {
border-top-left-radius: 20px;
border-top-right-radius: 20px;
-moz-border-radius-topleft: 20px;
-moz-border-radius-topright: 20px;
}
Unterschiedliche Rundungen
.box {
-moz-border-radius: 25px 50px;
border-radius: 25px 50px;
}
Lang gezogene Rundung mit zweitem Wert
.box {
-moz-border-topleft-radius: 50px 20px;
-moz-border-topright-radius: 50px 20px;
-moz-border-bottomleft-radius: 50px 20px;
-moz-border-bottomright-radius: 50px 20px;
border-top-left-radius: 50px 20px;
border-top-right-radius: 50px 20px;
border-bottom-left-radius: 50px 20px;
border-bottom-right-radius: 50px 20px;
}
Kreis mit "border-radius"
.box {
background: #999;
margin: 20px auto;
width:100px;
height:100px;
-moz-border-radius: 50px;
border-radius: 50px;
}
Und noch ein Kreis
.box {
background: #a7cfdf;
background: -moz-linear-gradient(top, #a7cfdf 0%, #23538a 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a7cfdf), color-stop(100%,#23538a));
background: -webkit-linear-gradient(top, #a7cfdf 0%,#23538a 100%);
background: -o-linear-gradient(top, #a7cfdf 0%,#23538a 100%);
background: -ms-linear-gradient(top, #a7cfdf 0%,#23538a 100%);
background: linear-gradient(top, #a7cfdf 0%,#23538a 100%);
margin: 20px auto;
width:100px;
height:100px;
-moz-border-radius: 100px;
border-radius: 100px;
border: 5px solid #fff;
-webkit-box-shadow: 0 0 10px #555;
-moz-box-shadow: 0 0 10px #555;
box-shadow: 0 0 10px #555;
}
Pokerchip
.box {
background: #45484d;
background: -moz-linear-gradient(top, #111 0%, #000000 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#111), color-stop(100%,#000000));
background: -webkit-linear-gradient(top, #111 0%,#000000 100%);
background: -o-linear-gradient(top, #111 0%,#000000 100%);
background: -ms-linear-gradient(top, #111 0%,#000000 100%);
background: linear-gradient(top, #111 0%,#000000 100%);
position: relative;
width: 100px;
height: 100px;
-webkit-border-radius: 100px;
-moz-border-radius: 100px;
border-radius: 100px;
border: 8px dashed #fff;
-webkit-box-shadow: 2px 2px 5px #777;
-moz-box-shadow: 2px 2px 5px #777;
box-shadow: 2px 2px 5px #777;
}
.box9 .text {
margin-top: 32px;
color: #fff;
font-family: Georgia, serif;
font-size: 24px;
text-align: center;
}
Aufgenähter Kreis-Flicken
.box {
background: #fff;
position: relative;
width: 100px;
height: 100px;
-webkit-border-radius: 100px;
-moz-border-radius: 100px;
border-radius: 100px;
border: 2px dashed #444;
-moz-box-shadow: 0 0 0 4px #fff, 0 0 10px #333;
-webkit-box-shadow: 0 0 0 4px #fff, 0 0 10px #333;
box-shadow: 0 0 0 4px #fff, 0 0 10px #333;
}
Preisschild
59,99
.box {
position: relative;
width: 100px;
height: 100px;
background: #fc0000;
background: -moz-linear-gradient(top, #fc0000 0%, #770000 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fc0000), color-stop(100%,#770000));
background: -webkit-linear-gradient(top, #fc0000 0%,#770000 100%);
background: -o-linear-gradient(top, #fc0000 0%,#770000 100%);
background: -ms-linear-gradient(top, #fc0000 0%,#770000 100%);
background: linear-gradient(top, #fc0000 0%,#770000 100%);
-webkit-border-radius: 10px 75px 75px 75px;
-moz-border-radius: 10px 75px 75px 75px;
border-radius: 10px 75px 75px 75px;
-webkit-box-shadow: 2px 2px 5px #333;
-moz-box-shadow: 2px 2px 5px #333;
box-shadow: 2px 2px 5px #333;
}
.box span {
position: absolute;
top: 35px;
left: 0;
width: 100px;
height: 100px;
text-align: center;
font-size: 30px;
font-weight: bold;
color: #fff;
text-shadow: 0 0 10px #fff;
}
Eine Wolke
<div class="box">
<div class="wolke1"></div>
<div class="wolke2"></div>
<div class="wolke3"></div>
</div>
.box {
position: relative;
width: 300px;
height: 200px;
margin: 20px auto;
}
.box .wolke1 {
position: absolute;
bottom: 0;
background: #fff;
width: 300px;
height: 100px;
border-radius: 50px;
}
.box .wolke2 {
position: absolute;
top: 60px;
left: 30px;
background: #fff;
width: 100px;
height: 100px;
border-radius: 60px;
}
.box .wolke3 {
position: absolute;
top: 30px;
left: 120px;
background: #fff;
width: 150px;
height: 150px;
border-radius: 100px;
}