Author : UnknownTidak ada komentar
Macam atau Jenis Border Untuk Modifikasi CSS
Border atau garis pinggir pada CSS pastinya sering anda temukan pada tutorial seperti membuat horizontal menu maupun vertical menu, tertulis dengan contoh kode seperti berikut :
border : 2px solid #000;
Namun tahukah anda, selain solid ada berbagai macam jenis border pada CSS, dan akan saya ulas dalam posting kali ini.
Semua contoh border akan saya beri warna biru HTML #2a4aeb dengan ukuran 7px untuk memperjelas perbedaannya.
Ini adalah contoh border solid, saya buat dengan kode
<div style="border: 7px solid #2a4aeb; height: 100px; text-align: center; width: 400px;">Tulisan atau isi di dalam border</div>
Ini adalah contoh border dotted, saya buat dengan kode
<div style="border: 7px dotted #2a4aeb; height: 100px; text-align: center; width: 400px;">Tulisan atau isi di dalam border</div>
Ini adalah contoh border dashed, saya buat dengan kode
<div style="border: 7px dashed #2a4aeb; height: 100px; text-align: center; width: 400px;">Tulisan atau isi di dalam border</div>
Ini adalah contoh border double, saya buat dengan kode
<div style="border: 7px double #2a4aeb; height: 100px; text-align: center; width: 400px;">Tulisan atau isi di dalam border</div>
Ini adalah contoh border groove, saya buat dengan kode
<div style="border: 7px groove #2a4aeb; height: 100px; text-align: center; width: 400px;">Tulisan atau isi di dalam border</div>
Ini adalah contoh border ridge, saya buat dengan kode
<div style="border: 7px ridge #2a4aeb; height: 100px; text-align: center; width: 400px;">Tulisan atau isi di dalam border</div>
Ini adalah contoh border inset, saya buat dengan kode
<div style="border: 7px inset #2a4aeb; height: 100px; text-align: center; width: 400px;">Tulisan atau isi di dalam border</div>
Ini adalah contoh border outset, saya buat dengan kode
<div style="border: 7px outset #2a4aeb; height: 100px; text-align: center; width: 400px;">Tulisan atau isi di dalam border</div>
Untuk catatan, dimulai dari border double ke bawah pada contoh di atas, ukuran atau tebal border harus di atas 2px agar lebih terlihat perbedaannya.
Semoga posting jenis-jenis border dalam CSS yang saya tulis kali ini bermanfaat, jangan lupa untuk meninggalkan komentar jika anda merasa terbantu dengan artikel ini atau hanya sekedar lewat dan membaca,
terima kasih.
border : 2px solid #000;
Namun tahukah anda, selain solid ada berbagai macam jenis border pada CSS, dan akan saya ulas dalam posting kali ini.
Jenis-jenis border CSS
Semua contoh border akan saya beri warna biru HTML #2a4aeb dengan ukuran 7px untuk memperjelas perbedaannya.
Border Solid.
Ini adalah contoh border solid, saya buat dengan kode
<div style="border: 7px solid #2a4aeb; height: 100px; text-align: center; width: 400px;">Tulisan atau isi di dalam border</div>
Border Dotted
Ini adalah contoh border dotted, saya buat dengan kode
<div style="border: 7px dotted #2a4aeb; height: 100px; text-align: center; width: 400px;">Tulisan atau isi di dalam border</div>
Border Dashed
Ini adalah contoh border dashed, saya buat dengan kode
<div style="border: 7px dashed #2a4aeb; height: 100px; text-align: center; width: 400px;">Tulisan atau isi di dalam border</div>
Border Double
Ini adalah contoh border double, saya buat dengan kode
<div style="border: 7px double #2a4aeb; height: 100px; text-align: center; width: 400px;">Tulisan atau isi di dalam border</div>
Border Groove
Ini adalah contoh border groove, saya buat dengan kode
<div style="border: 7px groove #2a4aeb; height: 100px; text-align: center; width: 400px;">Tulisan atau isi di dalam border</div>
Border Ridge
Ini adalah contoh border ridge, saya buat dengan kode
<div style="border: 7px ridge #2a4aeb; height: 100px; text-align: center; width: 400px;">Tulisan atau isi di dalam border</div>
Border Inset
Ini adalah contoh border inset, saya buat dengan kode
<div style="border: 7px inset #2a4aeb; height: 100px; text-align: center; width: 400px;">Tulisan atau isi di dalam border</div>
Border Outset
Ini adalah contoh border outset, saya buat dengan kode
<div style="border: 7px outset #2a4aeb; height: 100px; text-align: center; width: 400px;">Tulisan atau isi di dalam border</div>
Untuk catatan, dimulai dari border double ke bawah pada contoh di atas, ukuran atau tebal border harus di atas 2px agar lebih terlihat perbedaannya.
Semoga posting jenis-jenis border dalam CSS yang saya tulis kali ini bermanfaat, jangan lupa untuk meninggalkan komentar jika anda merasa terbantu dengan artikel ini atau hanya sekedar lewat dan membaca,
terima kasih.
Posted On : Rabu, 16 April 2014Time : 22.51