Chegara tomonlari

CSS Border - individual tomonlar

Oldingi misolalrdan har bir tomon uchun har xil chegara berish mumkinligini ko'rdingiz.

CSS-da chegaralarning har birini alohida tanlash uchun xususiyatlar ham mavjud (top, right, bottom va left):

CSS

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

Result:

W3Schools online HTML editor

Yuqoridagi misol xuddi shunday natija chiqaradi:

CSS

p {
  border-style: dotted solid;
}

W3Schools online HTML editor

Bular mana bunday ishlaydi:

Agar border-style xususiyatida 4 ta qiymat bo'lsa:

• border-style: dotted solid double dashed;

  • tepa chegara nuqtali bo'ladi

  • o'ng chegara oddiy

  • pastki chegara ikkitalik

  • chap chegara chiziqchali

Agar border-style xususiyatida 3 ta qiymat bo'lsa:

• border-style: dotted solid double;

  • tepa chegara nuqtali

  • o'ng va chap chegara oddiy

  • pastki chegara ikkitalik

Agar border-style xususiatida 2ta qiymat bo'lsa:

• border-style: dotted solid;

  • tepa va pastki chegara nuqtali

  • o'ng va chap chegara oddiy

Agar border-style xususiyatida 1 ta qiymat bo'lsa:

• border-style: dotted;

  • barcha chegara tomonlari nuqtali

CSS

/* To'rtta qiymatli */
p {
  border-style: dotted solid double dashed;
}

/* Uchta qiymatli */
p {
  border-style: dotted solid double;
}

/* Ikkita qiymatli */
p {
  border-style: dotted solid;
}

/* Bitta qiymatli */
p {
  border-style: dotted;
}

W3Schools online HTML editor

border-style xususiyati misolida ko'rsatgan usullarimiz, border-width va border-color xususiyatlarida ham ishlaydi.