Pengenalan dan Jenis-Jenis Border dalam CSS

Inilah Jenis-Jenis Border dalam CSS

ardingeblog - Halo pengunjung, gimana kabarnya? sehat atau lagi kurang sehat? klo lagi kurang sehat moga cepat sehat kembali. Posting kali ini saya akan membahas tentang Jenis-Jenis Border dalam CSS. Pertama, kita mulai dari Pengertian Border atau mungkin anda sudah tau ? Kalau belum, silahkan dibaca dulu. Border atau dalam bahasa indonesianya disebut sebagai "Garis Pinggir"  yaitu Garis yang berfungsi sebagai pemisah antar konten yang satu dengan yang lain atau bisa dibilang Border itu layaknya sebuah Frame untuk sebuah Foto.

Biasanya ketika anda sedang mengedit template, pasti anda pernah menemukan kode seperti dibawah ini :

border:2px solid #000;

Keterangan :

• Angka 2 itu adalah nilai ketebalan dari border
• Teks "solid" adalah salah satu jenis-jenis dari border
• dan Teks "#000" adalah Kode Warna untuk bordernya

Akan tetapi, Jenis-jenis Border bukan hanya solid saja, melainkan ada 8 jenis, sesuai dengan gambar diatas. dan inilah dia :

1. Border Solid

<div style="border: 7px solid #cb2d2d; height: 100px; text-align: center; width: 400px;">Tulisan atau isi di dalam border</div>

2. Border Dotted

<div style="border: 7px dotted #cb2d2d; height: 100px; text-align: center; width: 400px;">Tulisan atau isi di dalam border</div>

3. Border Dashed

<div style="border: 7px dashed #cb2d2d; height: 100px; text-align: center; width: 400px;">Tulisan atau isi di dalam border</div>

4. Border Double

<div style="border: 7px double #cb2d2d; height: 100px; text-align: center; width: 400px;">Tulisan atau isi di dalam border</div>

5. Border Groove

<div style="border: 7px groove #cb2d2d; height: 100px; text-align: center; width: 400px;">Tulisan atau isi di dalam border</div>

6. Border Ridge

<div style="border: 7px ridge #cb2d2d; height: 100px; text-align: center; width: 400px;">Tulisan atau isi di dalam border</div>

7. Border Inset

<div style="border: 7px inset #cb2d2d; height: 100px; text-align: center; width: 400px;">Tulisan atau isi di dalam border</div>

8. Border Outset

<div style="border: 7px outset #cb2d2d; height: 100px; text-align: center; width: 400px;">Tulisan atau isi di dalam border</div>

Nah itulah jenis-jenis dari Border dalam CSS. Namun, tahukah anda kalau nilai 7px yang terdapat dalam border: 7px solid #cb2d2d; adalah ukuran seluruh ketebalan dari Border. pernahkah anda berpikir untuk membuat ukuran ketebalan menjadi berbeda? maka dari itu lihatlah dan pahami kode dibawah ini :

border-bottom: 1px solid #cb2d2d;
border-left: 7px solid #cb2d2d;
border-right: 4px solid #cb2d2d;
border-top: 10px solid #cb2d2d;

Bagaimana? apakah anda menemukan suatu perbedaan ukuran ketebalan dari garisnya? Tentu saja, karena nilai atau angka dari ukuran ketebalan garis, "px" nya berbeda. dan untuk membuatnya jadi seperti itu, anda tinggal menghapus kode border: 7px solid #cb2d2d; dan menggantinya dengan kode diatas serta aturlah sesuai dengan nilai yang anda inginkan.

Oh iya, sebelum saya menutup postingan ini, saya ingin memberikan lagi sebuah style yang menarik, simaklah kodenya :

border-bottom: 7px solid #cb2d2d;
border-left: 7px dashed #cb2d2d;
border-right: 7px dotted #cb2d2d;
border-top: 7px groove #cb2d2d;

Perpaduan dari berbagai jenis-jenis Border yaitu Border Solid, Dashed, Dotted, dan Groove. mungkin anda berminat untuk membuat style seperti itu. Demikian Postingan saya tentang Pengenalan dan Jenis-Jenis Border dalam CSS. Semoga Bermanfaat untuk anda, Terima Kasih.

Artikel Terkait

Pengenalan dan Jenis-Jenis Border dalam CSS

4/ 5

Oleh Andi Ardiansyah

Andi Ardiansyah 5:29 AM Komentar