---
title: CSS Дугуй хүрээ
description: "## CSS дугуйрсан хүрээ `border-radius` нь элементэд бөөрөнхий хүрээ нэмэхэд ашиглагддаг Энгийн хүрээ Дугуй болж байгаа хүрээ Дугуйвтар хүрээ Дугуй хүрээ `p { border: 2px solid red; border-radius: 5px; }` ## Бүх CSS хүрээний шинж чанарууд | Шинж чанар |…"
url: "https://apprentice.mn/docs/css-rounded-borders/"
updated: "2021-07-24"
category: CSS
---

# CSS Дугуй хүрээ

## CSS дугуйрсан хүрээ

`border-radius` нь элементэд бөөрөнхий хүрээ нэмэхэд ашиглагддаг

Энгийн хүрээ

Дугуй болж байгаа хүрээ

Дугуйвтар хүрээ

Дугуй хүрээ

     `p {
  border: 2px solid red;
  border-radius: 5px;
}`

## Бүх CSS хүрээний шинж чанарууд

| Шинж чанар | Тайлбар |
| --- | --- |
| border | Бүх шинж чанарыг нэг мэдэгдэлд тохируулна |
| border-bottom | Бүх доод хүрээний шинж чанаруудыг нэг мэдэгдэлд тохируулна |
| border-bottom-color | Доод хүрээний өнгийг тохируулна |
| border-bottom-style | Доод хүрээний хэв маягийг тохируулна |
| border-bottom-width | Доод хүрээний өргөнийг тохируулна |
| border-color | Дөрвөн хүрээний өнгийг тохируулна |
| border-left | Зүүн талын бүх шинж чанарыг нэг мэдэгдэлд тохируулна |
| border-left-color | Зүүн хүрээний өнгийг тохируулна |
| border-left-style | Зүүн хүрээний хэв маягийг тохируулна |
| border-left-width | Зүүн хүрээний өргөнийг тохируулна |
| border-radius | Хүрээний буланг бөөрөнхийлнө |
| border-right | Баруун хүрээний бүх шинж чанарыг нэг мэдэгдэлд оруулна |
| border-right-color | Баруун хүрээний өнгийг тохируулна |
| border-right-style | Баруун хүрээний хэв маягийг тохируулна |
| border-right-width | Баруун хүрээний өргөнийг тохируулна |
| border-style | Дөрвөн хүрээний хэв маягийг тохируулна |
| border-top | Бүх дээд хүрээний шинж чанаруудыг нэг мэдэгдэлд тохируулна |
| border-top-color | Дээд хүрээний өнгийг тохируулна |
| border-top-style | Дээд хүрээний хэв маягийг тохируулна |
| border-top-width | Дээд хүрээний өргөнийг тохируулна |
| border-width | Дөрвөн хүрээний өргөнийг тохируулна |

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