CSS3 | Macam-macam Border

Bagi anda yang suka atau bahkan sering bermain dengan templates anda terutama bagian CSS pasti sudah tidak asing lagi dengan istilah border. Bahkan sebagian dari anda yang jarang bermain CSS tentu tau border. Yap, border sebuah istilah di dalam CSS yang berarti garis dan berfungsi membuat garis tentunya. Dalam CSS ada berbagai macam border, di tambah lagi border baru dengan CSS3. Nah di sini saya membuat daftar Macam-macam Border yang lengkap, setidaknya samapi posting ini di buat.

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;

}


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;
}


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;
}
 
Sekian yang bisa saya ajarkan, semoga bermanfaat saya akhiri wassalam. 

4 komentar:

Jana Virananda, 19 November 2010 at 11:54 | [Reply]

Ridge sm groove apa bedanya ya ? :)

BRI Jakarta Veteran, 19 November 2010 at 17:58 | [Reply]

ijin di simpan sahabat, tuk referensi

Dimas Abi Galoga, 20 November 2010 at 06:35 | [Reply]

@Mr.Kelpo sama saja, tapi terbalik. perhatikan gan
@BRI Jakarta Veteransilahkan gan

akhdyo, 20 November 2010 at 22:00 | [Reply]

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

Kotak Komentar Klasik Klik Di sini

« Prev Next » Home