Web Tutorial
Now Reading
Belajar Membuat Border Menggunakan CSS
0

Properti border merupakan salah satu bagian dari konten. Biasanya border berada pada tepi garis konten. Dalam pengaturan default, border bersifat transparan atau tidak terlihat. Dengan memanfaatkan border, Anda dapat mengatur jarak dan lebar tiap-tiap konten. Hampir semua yang terdapat pada website, dapat disisipkan border.

Properti Border memungkinkan Anda menentukan bagaimana batas kotak yang mewakili elemen seh-arusnya terlihat. Ada tiga sifat perbatasan yang dapat diubah:

  1. Border-color menentukan warna border.
  2. Border-style menentukan apakah border harus solid, garis putus-putus, garis ganda, atau salah satu dari nilai yang mungkin lainnya.
  3. Border-width menentukan lebar perbatasan.

 Properti border-color memungkinkan Anda mengubah warna perbatasan yang mengelilingi elemen. Anda dapat secara individu mengubah warna bagian bawah, kiri, atas dan kanan dari batas elemen menggunakan properti.

  1. border-bottom-color mengubah warna border bawah.
  2. border-top-color mengubah warna border atas.
  3. border-left-color mengubah warna border kiri.
  4. border-right-color mengubah warna border kanan.

Contoh berikut menunjukkan efek dari semua sifat ini –

The Border-Style Property

Properti bergaya border memungkinkan Anda memilih salah satu dari gaya border berikut:

  1. none: tidak ada batas (Setara dengan lebar border: 0;)
  2. solid: Perbatasan adalah satu garis padat.
  3. dotted: Perbatasan adalah serangkaian titik.
  4. dashed: Perbatasan adalah serangkaian garis pendek.
  5. double: Perbatasan adalah dua garis padat.
  6. groove: Perbatasan tampak seolah-olah diukir ke halaman.
  7. ridge: Perbatasan terlihat kebalikan dari alur.
  8. inset: Perbatasan membuat kotak terlihat seperti tertanam di halaman.
  9. outset: Perbatasan membuat kotak terlihat seperti keluar dari kanvas.
  10. hidden: Sama seperti tidak ada, kecuali dalam hal resolusi konflik perbatasan untuk elemen tabel.

Anda dapat secara individual mengubah gaya dasar, kiri, atas, dan kanan dari elemen menggunakan properti berikut:

  1. border-bottom-style mengubah gaya border bawah.
  2. border-top-style mengubah gaya top border.
  3. border-left-style mengubah gaya border kiri.
  4. border-right-style mengubah gaya border kanan.

Contoh berikut menunjukkan semua gaya border ini:

The Border-Width Property

Properti dengan lebar batas memungkinkan Anda mengatur lebar batas elemen. Nilai properti ini bisa berupa panjang dalam px, pt atau cm atau harus diatur menjadi tipis, sedang atau tebal.

Pelajari sebelumnya: Belajar Membuat Table Menggunakan CSS

Anda dapat mengubah lebar batas bawah, atas, kiri, dan kanan suatu elemen dengan menggunakan properti berikut:

  1. border-bottom-width mengubah lebar batas bawah.
  2. border-top-width mengubah lebar batas atas.
  3. border-left-width mengubah lebar perbatasan kiri.
  4. border-right-width mengubah lebar perbatasan kanan.

Contoh berikut menunjukkan semua lebar border ini:

Border Properties Using Shorthand

Properti perbatasan memungkinkan Anda menentukan warna, gaya, dan lebar garis dalam satu properti:

Contoh berikut menunjukkan bagaimana menggunakan ketiga properti tersebut menjadi satu properti. Ini adalah properti yang paling sering digunakan untuk mengatur batas sekitar elemen apapun.

Demikianlah tutorial belajar membuat border menggunakan CSS. Semoga artikel ini bermanfaat buat teman-teman. Terima kasih,

What's your reaction?
Luar Biasa
0%
Suka Sekali
100%
Keren
0%
Kagum
0%
Jelek
0%
Tidak Suka
0%
About The Author
admin
Hello, welcome to Bier Smart Site. stay here to get interesting information. :)

Leave a Response