> For the complete documentation index, see [llms.txt](https://cyberacademyuz.gitbook.io/w3schools/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://cyberacademyuz.gitbook.io/w3schools/css/css-borderlar/chegara-tomonlari.md).

# Chegara tomonlari

## <mark style="color:green;">CSS Border - individual tomonlar</mark> <a href="#css-border-individual-yonlari" id="css-border-individual-yonlari"></a>

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):

{% tabs %}
{% tab title="CSS" %}

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

Result:

<figure><img src="https://1205461495-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FqA16xzuzJkS1GYbYJ5OX%2Fuploads%2Fgit-blob-d3e8e795859c7a70d27e0f220f529b51cd31bd33%2Fimage%20(152).png?alt=media" alt=""><figcaption></figcaption></figure>

{% embed url="<https://www.w3schools.com/css/tryit.asp?filename=trycss_border-side>" %}
{% endtab %}
{% endtabs %}

Yuqoridagi misol xuddi shunday natija chiqaradi:

{% tabs %}
{% tab title="CSS" %}

```css
p {
  border-style: dotted solid;
}
```

{% embed url="<https://www.w3schools.com/css/tryit.asp?filename=trycss_border-side2>" %}
{% endtab %}
{% endtabs %}

Bular mana bunday ishlaydi:

Agar <mark style="color:red;">`border-style`</mark> 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 <mark style="color:red;">`border-style`</mark> xususiyatida 3 ta qiymat bo'lsa:

* **border-style: dotted solid double;**
  * tepa chegara nuqtali
  * o'ng va chap chegara oddiy
  * pastki chegara ikkitalik

Agar <mark style="color:red;">`border-style`</mark> xususiatida 2ta qiymat bo'lsa:

* **border-style: dotted solid;**
  * tepa va pastki chegara nuqtali
  * o'ng va chap chegara oddiy

Agar <mark style="color:red;">`border-style`</mark> xususiyatida 1 ta qiymat bo'lsa:

* **border-style: dotted;**
  * barcha chegara tomonlari nuqtali

{% tabs %}
{% tab title="CSS" %}

```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;
}
```

{% embed url="<https://www.w3schools.com/css/tryit.asp?filename=trycss_border-side3>" %}
{% endtab %}
{% endtabs %}

{% hint style="warning" %}
`border-style` xususiyati misolida ko'rsatgan usullarimiz, `border-width` va `border-color` xususiyatlarida ham ishlaydi.
{% endhint %}