Langsung saja jangan kepanjangan basa-basi. Inilah daftar bordernya :
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;
Border CSS3
CSS3 Border Radius (Collectively)
Border ini memungkinkan untuk membuat sudut border melengkung
#contoh {
border: 5px solid #000000;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}
border: 5px solid #000000;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}
CSS3 Border Radius (Individually)
Border ini memungkinkan untuk membuat sudut tertentu border melengkung
#contoh {
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;
}
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)
Border ini memungkinkan untuk membuat border memiliki banyak warna
#contoh {
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;
}
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;
}
Sekian yang bisa saya ajarkan, semoga bermanfaat saya akhiri wassalam.
4 komentar:
Ridge sm groove apa bedanya ya ? :)
ijin di simpan sahabat, tuk referensi
@Mr.Kelpo sama saja, tapi terbalik. perhatikan gan
@BRI Jakarta Veteransilahkan gan
ane jarang otak-atik css ndak tahu ilmunya soalnya, pasrah sama tamplate bawaan yang buat,
nice info sob kusimpan dulu halaman ini sebagai tambahan ilmu..
Post a Comment