---
title: CSS хүрээний өнгө
description: "## CSS хүрээний өнгө `border-color` нь 4 хүрээний өнгийг тохируулхад ашиглагдана. Өнгийг дараахь байдлаар тохируулж болно. - нэр – “улаан” гэх мэт өнгөний нэрийг зааж өгөх - HEX – “# ff0000” гэх мэт HEX утгыг заана уу. - RGB –…"
url: "https://apprentice.mn/docs/css-border-color/"
updated: "2021-07-23"
category: CSS
---

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

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

`border-color` нь 4 хүрээний өнгийг тохируулхад ашиглагдана.

Өнгийг дараахь байдлаар тохируулж болно.

- нэр – “улаан” гэх мэт өнгөний нэрийг зааж өгөх
- HEX – “# ff0000” гэх мэт HEX утгыг заана уу.
- RGB – “rgb (255,0,0)” гэх мэт RGB утгыг заана уу.
- HSL – “hsl (0, 100%, 50%)” гэх мэт HSL утгыг заана уу.
- тунгалаг

**Тэмдэглэл**: Хэрэв`border-color` тохируулагдаагүй бол элементийн өнгийг өгнө.

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

      `p.one {
  border-style: solid;
  border-color: red;
}

p.two {
  border-style: solid;
  border-color: green;
}

p.three {
  border-style: dotted;
  border-color: blue;
}`

**Үр дүн:**

Улаан хатуу хүрээ

Ногоог хатуу хүрээr

Цэгтэй цэнхэр хүрээ

**Тэмдэглэгээ:** "Хүрээний өнгө" шинж чанар нь дангаараа ашиглагдах тохиолдолд ажиллахгүй. "Хүрээний хэв маяг" шинж чанарыг ашиглан эхлээд хүрээний тохируулна уу.

## HSL Утга

Та HSL утгыг ашиглаж болно:

     `p.one {
  border-style: solid;
  border-color: hsl(0, 100%, 50%); /* red */
}`

## HEX Утга

Хүрээний өнгийг арван зургаатын утга (HEX) ашиглан тодорхойлж болно:

     `p.one {
  border-style: solid;
  border-color: #ff0000; /* red */
}`

## RGB Утга

Эсвэл RGB утгыг ашиглан:

     `p.one {
  border-style: solid;
  border-color: rgb(255, 0, 0); /* red */
}`        [https://www.addtoany.com/add_to/facebook?linkurl=https%3A%2F%2Fapprentice.mn%2Fdocs%2Fcss-border-color%2F&linkname=CSS%20%D1%85%D2%AF%D1%80%D1%8D%D1%8D%D0%BD%D0%B8%D0%B9%20%D3%A9%D0%BD%D0%B3%D3%A9](https://www.addtoany.com/add_to/facebook?linkurl=https%3A%2F%2Fapprentice.mn%2Fdocs%2Fcss-border-color%2F&linkname=CSS%20%D1%85%D2%AF%D1%80%D1%8D%D1%8D%D0%BD%D0%B8%D0%B9%20%D3%A9%D0%BD%D0%B3%D3%A9)[https://www.addtoany.com/add_to/mastodon?linkurl=https%3A%2F%2Fapprentice.mn%2Fdocs%2Fcss-border-color%2F&linkname=CSS%20%D1%85%D2%AF%D1%80%D1%8D%D1%8D%D0%BD%D0%B8%D0%B9%20%D3%A9%D0%BD%D0%B3%D3%A9](https://www.addtoany.com/add_to/mastodon?linkurl=https%3A%2F%2Fapprentice.mn%2Fdocs%2Fcss-border-color%2F&linkname=CSS%20%D1%85%D2%AF%D1%80%D1%8D%D1%8D%D0%BD%D0%B8%D0%B9%20%D3%A9%D0%BD%D0%B3%D3%A9)[https://www.addtoany.com/add_to/email?linkurl=https%3A%2F%2Fapprentice.mn%2Fdocs%2Fcss-border-color%2F&linkname=CSS%20%D1%85%D2%AF%D1%80%D1%8D%D1%8D%D0%BD%D0%B8%D0%B9%20%D3%A9%D0%BD%D0%B3%D3%A9](https://www.addtoany.com/add_to/email?linkurl=https%3A%2F%2Fapprentice.mn%2Fdocs%2Fcss-border-color%2F&linkname=CSS%20%D1%85%D2%AF%D1%80%D1%8D%D1%8D%D0%BD%D0%B8%D0%B9%20%D3%A9%D0%BD%D0%B3%D3%A9)[https://www.addtoany.com/share](https://www.addtoany.com/share)