CSS граници

Свойствата на CSS контура ви позволяват да посочите стила, ширината и цвета на границата на елемент.

---

Имам граници от всички страни.

Имам червена долна граница.

Имам заоблени граници.

Имам синя лява граница.

---

CSS Border Style

На 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;}

Резултат:

A dotted border.

A dashed border.

A solid border.

A double border.

A groove border. The effect depends on the border-color value.

A ridge border. The effect depends on the border-color value.

An inset border. The effect depends on the border-color value.

An outset border. The effect depends on the border-color value.

No border.

A hidden border.

A mixed border.

Опитайте сами »

Забележка: Нито едно от ДРУГИТЕ свойства на границата на CSS (за което ще научите повече в следващите глави) няма да има ВСИЧКИ ефект, освен ако border-styleсвойството не е зададено!

Ширина на границата на 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;
}

Резултат:

5px border-width

medium border-width

2px border-width

thick border-width

Опитайте сами »

---

Специфични странични ширини

В 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 */
}

Опитайте сами »

Цвят на границата на CSS

В border-colorимота се използва за задаване на цвета на четирите граници.

Цветът може да бъде зададен от:

• име - посочете име на цвят, като "червено"
• HEX - посочете HEX стойност, като "# ff0000"
• RGB - посочете RGB стойност, като "rgb (255,0,0)"
• HSL - посочете HSL стойност, като "hsl (0, 100%, 50%)"
• прозрачен

Забележка: Ако 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;
}

Резултат:

Red border

Green border

Blue border

Опитайте сами »

---

Специфични странични цветове

В border-colorимота може да има от една до четири стойности (за горната граница, дясната граница, долна граница, а на лявата граница). 

Пример

p.one {
  border-style: solid;
  border-color: red green blue yellow; /* red top, green right, blue bottom and yellow left */
}

Опитайте сами »

---

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 */
}

Опитайте сами »

---

HSL Стойности

Можете също да използвате HSL стойности:

Пример

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

Опитайте сами »

CSS граница - отделни страни

От примерите на предишните страници видяхте, че е възможно да зададете различна граница за всяка страна.

В CSS има и свойства за определяне на всяка от границите (отгоре, отдясно, отдолу и отляво):

Пример

p {
  border-top-style: dotted;
  border-right-style: solid;
  border-bottom-style: dotted;
  border-left-style: solid;
}

Резултат:

Different Border Styles

Опитайте сами »

Примерът по-горе дава същия резултат като този:

Пример

p {
  border-style: dotted solid;
}

Опитайте сами »

И така, ето как работи:

Ако border-styleсвойството има четири стойности:

• граничен стил: пунктирана плътна двойна чертичка;
  • горната граница е пунктирана
  • дясната граница е твърда
  • долната граница е двойна
  • лявата граница е прекъсната

Ако border-styleсвойството има три стойности:

• граничен стил: плътен плътен двойник;
  • горната граница е пунктирана
  • дясната и лявата граница са плътни
  • долната граница е двойна

Ако border-styleсвойството има две стойности:

• граничен стил: плътно плътно;
  • горните и долните граници са пунктирани
  • дясната и лявата граница са плътни

Ако border-styleимотът има една стойност:

• граничен стил: пунктиран;
  • и четирите граници са пунктирани

Пример

/* Four values */
p {
  border-style: dotted solid double dashed;
}

/* Three values */
p {
  border-style: dotted solid double;
}

/* Two values */
p {
  border-style: dotted solid;
}

/* One value */
p {
  border-style: dotted;
}

Опитайте сами »

В border-styleимота се използва в примера по-горе. Той обаче работи border-width и с и border-color.

CSS Border - стенографско свойство

Както видяхте на предишната страница, има много свойства, които трябва да се вземат предвид при работа с граници.

За да съкратите кода, също е възможно да зададете всички отделни свойства на границата в едно свойство.

В borderимота е краткият имот за следните отделни гранични свойства:

• border-width
• border-style (задължително)
• border-color

Пример

p {
  border: 5px solid red;
}

Резултат:

Some text

Опитайте сами »

Можете също така да посочите всички отделни свойства на границата само за едната страна:

Лява граница

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

Резултат:

Some text

Опитайте сами »

Долна граница

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

Резултат:

Some text

Опитайте сами »

CSS заоблени граници

В border-radiusимота се използва за добавяне заоблени граници на елемент:

Нормална граница

Кръгла граница

Заоблена граница

Най-кръгла граница

Пример

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

Опитайте сами »

---

Още примери

Всички свойства на горната граница в една декларация
Този пример демонстрира стенографско свойство за задаване на всички свойства на горната граница в една декларация.

Задаване на стила на долната граница
Този пример демонстрира как да зададете стила на долната граница.

Задаване на ширината на лявата граница
Този пример демонстрира как да зададете ширината на лявата граница.

Задайте цвета на четирите граници
Този пример демонстрира как да зададете цвета на четирите граници. Може да има от един до четири цвята.

Задайте цвета на дясната граница
Този пример демонстрира как да зададете цвета на дясната граница.

---

Изпробвайте се с упражнения!

Упражнение 1 »Упражнение 2 »Упражнение 3 »Упражнение 4 »

---

Всички свойства на CSS Border

Property	Description
border	Sets all the border properties in one declaration
border-bottom	Sets all the bottom border properties in one declaration
border-bottom-color	Sets the color of the bottom border
border-bottom-style	Sets the style of the bottom border
border-bottom-width	Sets the width of the bottom border
border-color	Sets the color of the four borders
border-left	Sets all the left border properties in one declaration
border-left-color	Sets the color of the left border
border-left-style	Sets the style of the left border
border-left-width	Sets the width of the left border
border-radius	Sets all the four border-*-radius properties for rounded corners
border-right	Sets all the right border properties in one declaration
border-right-color	Sets the color of the right border
border-right-style	Sets the style of the right border
border-right-width	Sets the width of the right border
border-style	Sets the style of the four borders
border-top	Sets all the top border properties in one declaration
border-top-color	Sets the color of the top border
border-top-style	Sets the style of the top border
border-top-width	Sets the width of the top border
border-width	Sets the width of the four borders