Aneka Border

by RzaaL1306

HTML

<div id="clear-both">
    <div id="hemisphere">Hemisphere</div>
    <div id="round-rectangle">Round Rectangle</div>
</div>
<div id="clear-both">
    <div id="bullet">Bullet</div>

    <div id="leaf">Leaf</div>
</div>

<div id="clear-both;">
    <div id="adv-hemisphere">Advanced Hemisphere</div>
    <div id="adv-round-rectangle">Advanced Round Rectangle</div>
</div>
<div id="clear-both">
    <div id="adv-bullet">Advanced Bullet</div>
    <div id="adv-leaf">Advanced Leaf</div>

</div>

CSS

/* CSS Border */
#clear-both{
width:100%;
clear:both;
}

#hemisphere,#round-rectangle,#bullet,#leaf,
#adv-hemisphere,#adv-round-rectangle,#adv-bullet,#adv-leaf{
    width:160px;
    height: 80px;
    border-style:solid;
    border-color:#777;
    border-width:thick;
    margin:30px ;
    padding:20px 12px 0 12px;
    line-height: 60px;
    float:left;
    font-weight:bold;
    display: inline;
    text-align: center;
    background:transparent;
    color:#000
}
#adv-hemisphere,#adv-round-rectangle,#adv-bullet,#adv-leaf{
    margin:30px 20px;
}
#hemisphere{
    border-color:#85C226;
    border-radius:100px 100px 0 0 ;
    -moz-border-radius:100px 100px 0 0;
    -webkit-border-radius:100px 100px 0 0;
}
#round-rectangle{
line-height:30px;
    border-color:#F7C200;
    border-radius:20px;
    -moz-border-radius:20px;
    -webkit-border-radius:20px;
}
#bullet{
    border-color:#4493A0;
    border-radius:20px 100px 100px 20px;
    -moz-border-radius:20px 100px 100px 20px;
    -webkit-border-radius:20px 100px 100px 20px;
}
#leaf{
    border-color:#DF127B;
    border-radius:0 120px 0 120px;
    -moz-border-radius:0 120px 0 120px;
    -webkit-border-radius:0 120px 0 120px;
}
#adv-hemisphere{
    float:left;
    line-height: 20px;
    border-width: 4px 30px 4px 30px;
    border-style: groove ridge dashed groove;
    border-color: #99dc30;
    border-radius: 100px 100px 0 0;
    -moz-border-radius: 100px 100px 0 0;
    -webkit-border-radius: 100px 100px 0 0;
}
#adv-round-rectangle{
    float:left;
    border: 12px double violet; 
    line-height: 30px;
    border-width: 0 12px 0 12px;
    border-radius: 40px 40px 60px 60px;
    -moz-border-radius: 40px 40px 60px 60px;
    -webkit-border-radius: 40px 40px 60px 60px;
}
#adv-bullet{
    float:left;
    border:12px groove orange;
    border-color: #99dc30 #ffff00 #33ccff #FF1493;red blue green black
    border-radius:20px 100px 100px 20px;
    -moz-border-radius:20px 100px 100px 20px;
    -webkit-border-radius:20px 100px 100px...