Css Border, Dari A Hingga Zet

Published by Concept Phone Selasa, 31 Juli 2018

Berikut ini ialah beberapa jenis border yang paling umum digunakan:

border-style: solid;

border-style: dashed;

border-style: dotted;

border-style: inset;

border-style: outset;

border-style: double;

border-style: groove;

border-style: ridge;

border-style: none;

Properti border dibagi menjadi tiga aspek:

• border-width
• border-style
• border-color

• border-width:
  border-width dipakai untuk memilih tebal border. Umumnya memakai satuan piksel, atau sanggup juga memakai ukuran relatif: thin (tipis), medium (sedang), atau thick (tebal).
• border-style:
  border-style dipakai untuk memilih tipe border.
• border-color:
  border-color dipakai untuk memilih warna border. Umumnya memakai warna HEX, atau sanggup juga memakai warna RGB atau menuliskan nama warna secara langsung.

Contoh Penerapan

Top-Down	Inline
<style type='text/css'> #contoh-border { border-width:4px; border-style:solid; border-color:#ffa500; } </style> ...... <div id='contoh-border'>OBJEK</div>	<div style='border-width:4px;border-style:solid;border-color:#ffa500;'> OBJEK </div>

Menggabungkan Tiga Deklarasi Border dalam Satu Properti

Properti border-width, border-style dan border-color sanggup digabungkan dalam satu properti saja yaitu border, dengan urutan menyerupai berikut:

border: 4px solid #ffa500;
border: border-width border-style border-color;

Memecah Border Menjadi Empat Sisi

Properti border juga sanggup dipecah menjadi empat sisi menyerupai ini:

Deklarasi	Keterangan
border-top: 4px solid #ffa500;	Menentukan tampilan border sebelah atas
border-right: 4px solid #ffa500;	Menentukan tampilan border sebelah kanan
border-bottom: 4px solid #ffa500;	Menentukan tampilan border sebelah bawah
border-left: 4px solid #ffa500;	Menentukan tampilan border sebelah kiri

Penerapan yang lebih detail sanggup memakai teori yang pertama, dengan dua jenis metode pemecahan sisi:

Deklarasi	Keterangan
border-top-width: 4px;	Menentukan tebal border sebelah atas
border-right-width: 4px;	Menentukan tebal border sebelah kanan
border-bottom-width: 4px;	Menentukan tebal border sebelah bawah
border-left-width: 4px;	Menentukan tebal border sebelah kiri
border-top-style: solid;	Menentukan tipe border sebelah atas
border-right-style: solid;	Menentukan tipe border sebelah kanan
border-bottom-style: solid;	Menentukan tipe border sebelah bawah
border-left-style: solid;	Menentukan tipe border sebelah kiri
border-top-color: #ffa500;	Menentukan warna border sebelah atas
border-right-color: #ffa500;	Menentukan warna border sebelah kanan
border-bottom-color: #ffa500;	Menentukan warna border sebelah bawah
border-left-color: #ffa500;	Menentukan warna border sebelah kiri

Deklarasi	Keterangan
border-width: 4px 2px 7px 0px;	Urutan valuenya adalah: top right bottom left
border-style: solid dotted dashed none;
border-color: red green blue orange;

Sumber https://www.dte.web.id/