---
title: CSS Хүрээ
description: "> CSS хүрээний шинж чанарууд нь элементийн хүрээний хэв маяг, өргөн, өнгийг тодорхойлох боломжийг танд олгоно. ## CSS хүрнээний загвар  `border-style` шинж чанар нь ямар хүрээг харуулахыг зааж өгдөг. Дараах утгуудыг зөвшөөрнө: - `dotted` – Цэгтэй хүрээг тодорхойлно - `dashed`…"
url: "https://apprentice.mn/docs/css-borders/"
updated: "2021-07-23"
category: CSS
---

# CSS Хүрээ

> CSS хүрээний шинж чанарууд нь элементийн хүрээний хэв маяг, өргөн, өнгийг тодорхойлох боломжийг танд олгоно.

## CSS хүрнээний загвар

 `border-style` шинж чанар нь ямар хүрээг харуулахыг зааж өгдөг.

Дараах утгуудыг зөвшөөрнө:

- `dotted` – Цэгтэй хүрээг тодорхойлно
- `dashed` – Тасархай хүрээг тодорхойлно
- `solid` -Хатуу хүрээг тодорхойлдог
- `double` – Давхар хүрээг тодорхойлно
- `groove` -3D ховилтой хүрээг тодорхойлно. Үр нөлөө нь хүрээний өнгөний утгаас хамаарна
- `ridge` – 3D нурууны хүрээг тодорхойлно. Үр нөлөө нь хүрээний өнгөний утгаас хамаарна
- `inset` -3D оруулгын хүрээг тодорхойлно. Үр нөлөө нь хүрээний өнгөний утгаас хамаарна
- `outset` -3D гаралтын хүрээг тодорхойлдог. Үр нөлөө нь хүрээний өнгөний утгаас хамаарна
- `none` – хүрээ байхгүй
- `hidden` – үл үзэгдэгч хүрээ

`border-style`  нь нэгээс дөрөв хүртэлх утгатай байж болно (дээд хүрээ, баруун хил, доод хүрээ, зүүн хүрээ).

Хүрээн янз бүрийн хэв маягийг харуулах:

     `p.dotted {border-style: dotted;}
p.dashed {border-style: dashed;}
p.solid {border-style: solid;}
p.double {border-style: double;}
p.groove {border-style: groove;}
p.ridge {border-style: ridge;}
p.inset {border-style: inset;}
p.outset {border-style: outset;}
p.none {border-style: none;}
p.hidden {border-style: hidden;}
p.mix {border-style: dotted dashed solid double;}`

**Result:**

A Цэгиэй хүрээ.

A тасархай хүрээ.

Хатуу хүрээ.

Давхар хүрээ

3D ховилтой хүрээ

3D нуруутай хүрээ.

3D оруулагтай хүрээ.

3D гаралтын хүрээ

хүрээ байхгүй

нуугдмал хүрээ

холигдмол хүрээ

        [https://www.addtoany.com/add_to/facebook?linkurl=https%3A%2F%2Fapprentice.mn%2Fdocs%2Fcss-borders%2F&linkname=CSS%20%D0%A5%D2%AF%D1%80%D1%8D%D1%8D](https://www.addtoany.com/add_to/facebook?linkurl=https%3A%2F%2Fapprentice.mn%2Fdocs%2Fcss-borders%2F&linkname=CSS%20%D0%A5%D2%AF%D1%80%D1%8D%D1%8D)[https://www.addtoany.com/add_to/mastodon?linkurl=https%3A%2F%2Fapprentice.mn%2Fdocs%2Fcss-borders%2F&linkname=CSS%20%D0%A5%D2%AF%D1%80%D1%8D%D1%8D](https://www.addtoany.com/add_to/mastodon?linkurl=https%3A%2F%2Fapprentice.mn%2Fdocs%2Fcss-borders%2F&linkname=CSS%20%D0%A5%D2%AF%D1%80%D1%8D%D1%8D)[https://www.addtoany.com/add_to/email?linkurl=https%3A%2F%2Fapprentice.mn%2Fdocs%2Fcss-borders%2F&linkname=CSS%20%D0%A5%D2%AF%D1%80%D1%8D%D1%8D](https://www.addtoany.com/add_to/email?linkurl=https%3A%2F%2Fapprentice.mn%2Fdocs%2Fcss-borders%2F&linkname=CSS%20%D0%A5%D2%AF%D1%80%D1%8D%D1%8D)[https://www.addtoany.com/share](https://www.addtoany.com/share)