Kepala Batas 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 properti 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 seperti ini:

Contoh

p {
  border-style: dotted solid;
}

Coba Sendiri

Prinsip kerja adalah seperti ini:

Jika border-style Pengaturan sifat empat nilai:

border-style: dotted solid double dashed;

  • Batas atas adalah garisan lemah
  • Batas kanan adalah garisan tebal
  • Batas bawah adalah garisan ganda
  • Batas kiri adalah garisan lemah

Jika border-style Pengaturan sifat tiga nilai:

border-style: dotted solid double;

  • Batas atas adalah garisan lemah
  • kiri dan kanan garisan adalah baris
  • Batas bawah adalah garisan ganda

Jika border-style Properti menetapkan dua nilai:

border-style: dotted solid;

  • atas dan bawah garisan adalah garis bulat
  • kiri dan kanan garisan adalah baris

Jika border-style Properti menetapkan satu nilai:

border-style: dotted;

  • Empat sisi adalah garis bulat

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

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