Bagi sobat Blogger yang suka atau bahkan sering bermain dengan templates, terutama bagian CSS pasti sudah tidak asing lagi dengan istilah border. Bahkan sebagian dari sobat yang jarang bermain CSS tentu tau border. 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 bagi yang suka di sini saya membuat daftar macam-macam Border yang bisa sobat pilih sesuai selera:
Border CSS3
CSS3 Border Radius (Collectively)
Border ini memungkinkan untuk membuat sudut border melengkung
CSS3 Border Radius (Individually)
Border ini memungkinkan untuk membuat sudut tertentu border melengkung
CSS3 Border (Multipel)
Border ini memungkinkan untuk membuat border memiliki banyak warna
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;
}
-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;
}
Semoga bisa bermanfaat
No comments
Note: only a member of this blog may post a comment.