Batas setiap sisi CSS

Batas CSS - Batas tunggal

Dari contoh di bab sebelumnya, Anda sudah melihat bahwa dapat menentukan batas yang berbeda untuk setiap sisi.

Dalam CSS, ada beberapa atribut yang dapat digunakan untuk menentukan setiap batas (atas, kanan, bawah, dan kiri):

Contoh

p {
  border-top-style: dotted;
  border-right-style: solid;
  border-bottom-style: dotted;
  border-left-style: solid;
}

Hasil:

Gaya batas yang berbeda

Coba Sendiri

Gaya batas yang berbeda

Hasil contoh di atas sama dengan ini:

Contoh

p {
  border-style: dotted solid;
}

Coba Sendiri

Prinsip kerjanya seperti ini:

Jika border-style Pengaturan atribut empat nilai:

border-style: dotted solid double dashed;

  • Batas atas adalah garis gelap
  • Batas kanan adalah garis tebal
  • Batas bawah adalah garis ganda
  • Batas kiri adalah garis gelap

Jika border-style Pengaturan atribut tiga nilai:

border-style: dotted solid double;

  • Batas atas adalah garis gelap
  • Batas kanan dan kiri adalah garis tebal
  • Batas bawah adalah garis ganda

Jika border-style Properti menetapkan dua nilai:

border-style: dotted solid;

  • Batas atas dan bawah adalah garis bergelombang
  • Batas kanan dan kiri adalah garis tebal

Jika border-style Properti menetapkan satu nilai:

border-style: dotted;

  • Empat sisi berupa garis bergelombang

Contoh

/* Empat nilai */
p {
  border-style: dotted solid double dashed; 
}
/* Tiga nilai */
p {
  border-style: dotted solid double; 
}
/* Dua nilai */
p {
  border-style: dotted solid; 
}
/* Satu nilai */
p {
  border-style: dotted; 
}

Coba Sendiri

Dalam contoh sebelumnya digunakan adalah border-style Properti. Tetapi border-width dan border-color Juga berlaku.