22 October 2010

Macam-macam Border CSS dan CSS3

Tip Trik Blogger kali ini saya akan membahas bagaimana cara mempercantik blog dengan menghiasi border.
Mungkin ada sebagian dari sobat blogger yang belum tau mengenai macam-macam model border,
Sekarang saya akan memberikan beberapa contoh model border yang bisa sobat terapkan di blo.
Jika ada yang mau mecoba
Silahkan lihat beberapa contoh berikut :

Contoh penggunaan border


border: 5px solid #000000;


border: 5px dotted #000000;


border: 5px dashed #000000;


border: 5px inset #000000;


border: 5px outset #000000;


border: 5px double #000000;


border: 5px groove #000000;


border: 5px ridge #000000;

CSS3 Border Radius (Collectively)

#CSS3 {
       border: 5px solid #000000;
       -moz-border-radius: 10px;
       -webkit-border-radius: 10px;

}



CSS3 Border Radius (Individually)

#CSS3 {
border: 5px solid #000000;
       -moz-border-radius-topleft: 15px;
       -moz-border-radius-topright: 0px;
       -moz-border-radius-bottomright: 15px;
       -moz-border-radius-bottomleft: 0px;
       -webkit-border-top-left-radius: 15px;
       -webkit-border-top-right-radius: 0px;
       -webkit-border-bottom-left-radius: 0px;
       -webkit-border-bottom-right-radius: 15px;
}




CSS3 Border (Multipel)

#CSS3 {
       border-width:5px;
       border-style:solid;
       -moz-border-top-colors:blue red orange green purple yellow;
       -moz-border-right-colors:blue red orange green purple yellow;
       -moz-border-bottom-colors:blue red orange green purple yellow;
       -moz-border-left-colors:blue red orange green purple yellow;
}



Itulah beberapa-macam border CSS dan CSS3

Semoga bermanfaat

No comments:

Post a Comment