CSS Border - Individual Sides

CSS Border - Individual Sides

Avvalgi sahifalardagi misollardan siz har bir tomon uchun turli chegaralarni belgilash mumkinligini ko'rdingiz.

CSS-da, chegara har bir tomon uchun alohida xususiyatlarga ega:

Misol

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

Natija:

Yuqoridagi misol quyidagi natijani beradi:

Misol

p {
  border-style: dotted solid;
}

Qanday ishlaydi:

Agar border-style xususiyati to'rt qiymatga ega bo'lsa:

• border-style: dotted solid double dashed;
  • Yuqori chegara nuqtali
  • O'ng chegara chiziqli
  • Pastki chegara ikki qatorli
  • Chap chegara chiziqli

Agar border-style xususiyati uch qiymatga ega bo'lsa:

• border-style: dotted solid double;
  • Yuqori chegara nuqtali
  • O'ng va chap chegaralar chiziqli
  • Pastki chegara ikki qatorli

Agar border-style xususiyati ikki qiymatga ega bo'lsa:

• border-style: dotted solid;
  • Yuqori va pastki chegaralar nuqtali
  • O'ng va chap chegaralar chiziqli

Agar border-style xususiyati bir qiymatga ega bo'lsa:

• border-style: dotted;
  • Barcha to'rt chegaralar nuqtali

Misollar

To'rt qiymatli

p {
  border-style: dotted solid double dashed;
}

Uch qiymatli

p {
  border-style: dotted solid double;
}

Ikki qiymatli

p {
  border-style: dotted solid;
}

Bir qiymatli

p {
  border-style: dotted;
}

Yuqoridagi misolda border-style xususiyati ishlatilgan. Ammo, bu border-width va border-color bilan ham ishlaydi.