---
title: CSS хүрээний өргөн
description: "## CSS хүрээний өргөн `border-width` нь дөрвөн хүрээний өргөнийг тодорхойлдог. Өргөнийг тодорхой хэмжээгээр (px, pt, cm, em, гэх мэт) тохируулж эсвэл урьдчилан тодорхойлсон гурван утгын аль нэгийг ашиглан тохируулж болно: нимгэн, дунд, зузаан: Хүрээний янз бүрийн өргөнийг харуулах: `p.one {…"
url: "https://apprentice.mn/docs/css-border-width/"
updated: "2021-07-23"
category: CSS
---

# CSS хүрээний өргөн

## CSS хүрээний өргөн

`border-width` нь дөрвөн хүрээний өргөнийг тодорхойлдог.

Өргөнийг тодорхой хэмжээгээр (px, pt, cm, em, гэх мэт) тохируулж эсвэл урьдчилан тодорхойлсон гурван утгын аль нэгийг ашиглан тохируулж болно: нимгэн, дунд, зузаан:

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

      `p.one {
  border-style: solid;
  border-width: 5px;
}

p.two {
  border-style: solid;
  border-width: medium;
}

p.three {
  border-style: dotted;
  border-width: 2px;
}

p.four {
  border-style: dotted;
  border-width: thick;
}`

**Үр дүн:**

## Хүрээний өргөн шинж чанар

Some text.

Some text.

Some text.

Some text.

Some text.

Some text.

**Тэмдэглэгээ:**"хүрээний өргөн" шинж чанар нь дангаараа ашиглагдах тохиолдолд ажиллахгүй. Эхлээд хүрээг тохируулахын тулд "border-style" шинж чанарыг үргэлж зааж өг.

## Хажуугийн өргөн

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

     `p.one {
  border-style: solid;
  border-width: 5px 20px; /* 5px top and bottom, 20px on the sides */
}

p.two {
  border-style: solid;
  border-width: 20px 5px; /* 20px top and bottom, 5px on the sides */
}

p.three {
  border-style: solid;
  border-width: 25px 10px 4px 35px; /* 25px top, 10px right, 4px bottom and 35px left */
}`        [https://www.addtoany.com/add_to/facebook?linkurl=https%3A%2F%2Fapprentice.mn%2Fdocs%2Fcss-border-width%2F&linkname=CSS%20%D1%85%D2%AF%D1%80%D1%8D%D1%8D%D0%BD%D0%B8%D0%B9%20%D3%A9%D1%80%D0%B3%D3%A9%D0%BD](https://www.addtoany.com/add_to/facebook?linkurl=https%3A%2F%2Fapprentice.mn%2Fdocs%2Fcss-border-width%2F&linkname=CSS%20%D1%85%D2%AF%D1%80%D1%8D%D1%8D%D0%BD%D0%B8%D0%B9%20%D3%A9%D1%80%D0%B3%D3%A9%D0%BD)[https://www.addtoany.com/add_to/mastodon?linkurl=https%3A%2F%2Fapprentice.mn%2Fdocs%2Fcss-border-width%2F&linkname=CSS%20%D1%85%D2%AF%D1%80%D1%8D%D1%8D%D0%BD%D0%B8%D0%B9%20%D3%A9%D1%80%D0%B3%D3%A9%D0%BD](https://www.addtoany.com/add_to/mastodon?linkurl=https%3A%2F%2Fapprentice.mn%2Fdocs%2Fcss-border-width%2F&linkname=CSS%20%D1%85%D2%AF%D1%80%D1%8D%D1%8D%D0%BD%D0%B8%D0%B9%20%D3%A9%D1%80%D0%B3%D3%A9%D0%BD)[https://www.addtoany.com/add_to/email?linkurl=https%3A%2F%2Fapprentice.mn%2Fdocs%2Fcss-border-width%2F&linkname=CSS%20%D1%85%D2%AF%D1%80%D1%8D%D1%8D%D0%BD%D0%B8%D0%B9%20%D3%A9%D1%80%D0%B3%D3%A9%D0%BD](https://www.addtoany.com/add_to/email?linkurl=https%3A%2F%2Fapprentice.mn%2Fdocs%2Fcss-border-width%2F&linkname=CSS%20%D1%85%D2%AF%D1%80%D1%8D%D1%8D%D0%BD%D0%B8%D0%B9%20%D3%A9%D1%80%D0%B3%D3%A9%D0%BD)[https://www.addtoany.com/share](https://www.addtoany.com/share)