---
title: CSS Border шинж чанарын товчлол
description: "## CSS Border – товчлол Өмнөх хуудсанд харсан шиг, хүрээтэй харьцахдаа олон шинж чанарыг анхаарч үзэх хэрэгтэй. `border` нь дараахь хүрээний шинж чанаруудын товчлолын юм. - `border-width` - `border-style` (шаардлагатай) - `border-color` `p { border: 5px solid red; }` Текст…"
url: "https://apprentice.mn/docs/css-shorthand-border-property/"
updated: "2021-07-24"
category: CSS
---

# CSS Border шинж чанарын товчлол

## CSS Border – товчлол

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

`border` нь дараахь хүрээний шинж чанаруудын товчлолын юм.

- `border-width`
- `border-style` (шаардлагатай)
- `border-color`

     `p {
  border: 5px solid red;
}`

Текст байна

Та зөвхөн бүх талын хүрээний шинж чанарыг зөвхөн нэг талд нь зааж өгч болно:

### Зүүн хүрээ

      `p {
  border-left: 6px solid red;
  background-color: lightgrey;
}`

Текст байна

### Доод хүрээ

     `p {
  border-bottom: 6px solid red;
  background-color: lightgrey;
}`

Текст байна

         [https://www.addtoany.com/add_to/facebook?linkurl=https%3A%2F%2Fapprentice.mn%2Fdocs%2Fcss-shorthand-border-property%2F&linkname=CSS%20Border%20%D1%88%D0%B8%D0%BD%D0%B6%20%D1%87%D0%B0%D0%BD%D0%B0%D1%80%D1%8B%D0%BD%20%D1%82%D0%BE%D0%B2%D1%87%D0%BB%D0%BE%D0%BB](https://www.addtoany.com/add_to/facebook?linkurl=https%3A%2F%2Fapprentice.mn%2Fdocs%2Fcss-shorthand-border-property%2F&linkname=CSS%20Border%20%D1%88%D0%B8%D0%BD%D0%B6%20%D1%87%D0%B0%D0%BD%D0%B0%D1%80%D1%8B%D0%BD%20%D1%82%D0%BE%D0%B2%D1%87%D0%BB%D0%BE%D0%BB)[https://www.addtoany.com/add_to/mastodon?linkurl=https%3A%2F%2Fapprentice.mn%2Fdocs%2Fcss-shorthand-border-property%2F&linkname=CSS%20Border%20%D1%88%D0%B8%D0%BD%D0%B6%20%D1%87%D0%B0%D0%BD%D0%B0%D1%80%D1%8B%D0%BD%20%D1%82%D0%BE%D0%B2%D1%87%D0%BB%D0%BE%D0%BB](https://www.addtoany.com/add_to/mastodon?linkurl=https%3A%2F%2Fapprentice.mn%2Fdocs%2Fcss-shorthand-border-property%2F&linkname=CSS%20Border%20%D1%88%D0%B8%D0%BD%D0%B6%20%D1%87%D0%B0%D0%BD%D0%B0%D1%80%D1%8B%D0%BD%20%D1%82%D0%BE%D0%B2%D1%87%D0%BB%D0%BE%D0%BB)[https://www.addtoany.com/add_to/email?linkurl=https%3A%2F%2Fapprentice.mn%2Fdocs%2Fcss-shorthand-border-property%2F&linkname=CSS%20Border%20%D1%88%D0%B8%D0%BD%D0%B6%20%D1%87%D0%B0%D0%BD%D0%B0%D1%80%D1%8B%D0%BD%20%D1%82%D0%BE%D0%B2%D1%87%D0%BB%D0%BE%D0%BB](https://www.addtoany.com/add_to/email?linkurl=https%3A%2F%2Fapprentice.mn%2Fdocs%2Fcss-shorthand-border-property%2F&linkname=CSS%20Border%20%D1%88%D0%B8%D0%BD%D0%B6%20%D1%87%D0%B0%D0%BD%D0%B0%D1%80%D1%8B%D0%BD%20%D1%82%D0%BE%D0%B2%D1%87%D0%BB%D0%BE%D0%BB)[https://www.addtoany.com/share](https://www.addtoany.com/share)