---
title: CSS Хүрээний талууд
description: "## CSS Border -тусдаа талууд Өмнөх хуудсуудын жишээнүүдээс та тал тус бүрт өөр хүрээг зааж өгөх боломжтойг харсан. CSS дээр хүрээ тус бүрийг (дээд, баруун, доод, зүүн) тодорхойлох шинж чанарууд бас байдаг. `p { border-top-style: dotted; border-right-style: solid; border-bottom-style: dotted;…"
url: "https://apprentice.mn/docs/css-border-sides/"
updated: "2021-07-24"
category: CSS
---

# CSS Хүрээний талууд

## CSS Border -тусдаа талууд

Өмнөх хуудсуудын жишээнүүдээс та тал тус бүрт өөр хүрээг зааж өгөх боломжтойг харсан.

CSS дээр хүрээ тус бүрийг (дээд, баруун, доод, зүүн) тодорхойлох шинж чанарууд бас байдаг.

     `p {
  border-top-style: dotted;
  border-right-style: solid;
  border-bottom-style: dotted;
  border-left-style: solid;
}`      Өөр хүрээний загвар

Дээрх жишээ нь үүнтэй ижил үр дүнг өгдөг.

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

Тиймээс, энэ нь хэрхэн ажилладагийг энд харуулав.

Хэрэв  `border-style`  нь дөрвөн утгатай бол:

- **Хүрээний хэв маяг: тасархай цул давхар тасархай;**
  - дээд хүрээ нь цэгтэй
  - баруун хүрээ хатуу байна
  - доод хүрээ давхар байна
  - зүүн хүрээ таслагдсан

Хэрэв`border-style` нь гурван утгатай бол:

- **Хүрээний хэв маяг: цэгтэй хатуу давхар;**
  - дээд хүрээ нь цэгтэй
  - баруун ба зүүн хүрээ хатуу байна
  - доод хүрээ давхар байна

Хэрэв`border-style` нь хоёр утгатай бол:

- **Хүрээний хэв маяг: тасархай цул;**
  - дээд ба доод хүрээ нь цэгтэй байна
  - баруун ба зүүн хүрээ хатуу байна

Хэрэв`border-style`нь нэг утгатай бол:

- **Хүрээний хэв маяг: тасархай;**
  - дөрвөн хүрээ бүгд цэгтэй

     `/* Four values */
p {
  border-style: dotted solid double dashed;
}

/* Three values */
p {
  border-style: dotted solid double;
}

/* Two values */
p {
  border-style: dotted solid;
}

/* One value */
p {
  border-style: dotted;
}`

`border-style` дээрх жишээнд ашигласан болно. Гэхдээ энэ нь мөн `border-width` ба `border-color` ашигласан.

        [https://www.addtoany.com/add_to/facebook?linkurl=https%3A%2F%2Fapprentice.mn%2Fdocs%2Fcss-border-sides%2F&linkname=CSS%20%D0%A5%D2%AF%D1%80%D1%8D%D1%8D%D0%BD%D0%B8%D0%B9%20%D1%82%D0%B0%D0%BB%D1%83%D1%83%D0%B4](https://www.addtoany.com/add_to/facebook?linkurl=https%3A%2F%2Fapprentice.mn%2Fdocs%2Fcss-border-sides%2F&linkname=CSS%20%D0%A5%D2%AF%D1%80%D1%8D%D1%8D%D0%BD%D0%B8%D0%B9%20%D1%82%D0%B0%D0%BB%D1%83%D1%83%D0%B4)[https://www.addtoany.com/add_to/mastodon?linkurl=https%3A%2F%2Fapprentice.mn%2Fdocs%2Fcss-border-sides%2F&linkname=CSS%20%D0%A5%D2%AF%D1%80%D1%8D%D1%8D%D0%BD%D0%B8%D0%B9%20%D1%82%D0%B0%D0%BB%D1%83%D1%83%D0%B4](https://www.addtoany.com/add_to/mastodon?linkurl=https%3A%2F%2Fapprentice.mn%2Fdocs%2Fcss-border-sides%2F&linkname=CSS%20%D0%A5%D2%AF%D1%80%D1%8D%D1%8D%D0%BD%D0%B8%D0%B9%20%D1%82%D0%B0%D0%BB%D1%83%D1%83%D0%B4)[https://www.addtoany.com/add_to/email?linkurl=https%3A%2F%2Fapprentice.mn%2Fdocs%2Fcss-border-sides%2F&linkname=CSS%20%D0%A5%D2%AF%D1%80%D1%8D%D1%8D%D0%BD%D0%B8%D0%B9%20%D1%82%D0%B0%D0%BB%D1%83%D1%83%D0%B4](https://www.addtoany.com/add_to/email?linkurl=https%3A%2F%2Fapprentice.mn%2Fdocs%2Fcss-border-sides%2F&linkname=CSS%20%D0%A5%D2%AF%D1%80%D1%8D%D1%8D%D0%BD%D0%B8%D0%B9%20%D1%82%D0%B0%D0%BB%D1%83%D1%83%D0%B4)[https://www.addtoany.com/share](https://www.addtoany.com/share)