Рамка

CSS Рамките (border) ви позволяват да определите и стилизирате границите на даден HTML елемент.

Border Style

Пропъртито border-style определя какъв вид рамка ще използвате за конкретния елемент. Забележка: Нито едно от пропъртитата за рамки няма да работят, ако border-style не е дефиниран! Border-Style Стойности:

  • none: Елемента няма рамка
  • dotted: Определя пунктирана рамка
  • dashed: Рамка съставена от тирета
  • solid: Дефинира плътна рамка
  • double: Дефинира двойна рамка.
  • groove: Дефинира 3D grooved рамка, като ефекта зависи от това какви цветове са избрани.
  • ridge: Дефинира 3D ridge рамка, като ефекта отново зависи от избраните цветове.
  • inset: Дефинира 3D рамка, като ефекта отново зависи от избраните цветове
  • outset: Дефинира 3D ridge рамка, като ефекта отново зависи от избраните цветове

Разликата между 3D рамките е в ефекта, който се получава. Опитайте сами: Определете стила на рамката


Border-Width

Това пропърти задава дебелината на рамката. За ширината се използва или една от предварителните стойност (тънка, средна, дебела) или се означава с пиксели. Забележка: border-width не работи ако стила на рамката не е определен преди това.

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

Border-Color

Пропъртито се използва за задаване на цвят на рамката. Цвета се определя по 3 начина:

  • име на цвят – „red“
  • RGB стойност – като „RGB (255,0,0)“
  • Hex – шестнадесетична стойнсот, като „# ff0000“

Може да направите рамката прозрачна (transparent). Забележка: Както и за дебелината, border-color няма да работи, освен ако не сте избрали стила на рамката преди това.

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

Border – Индивидуално Стилизиране на Страните

В CSS е възможно отделно да стилизираме различните страни на една и съща рамка. Можем да приложим различни стилове, различна дебелина и цвят:

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

Примера по-горе може да се направи само с едно пропърти:

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

Пропъртито border-style може да има от една до четири стойности.

  • border-style: dotted solid double dashed;
    • горната рамка е dotted
    • дясната рамка е solid
    • долната рамка е double
    • лявата рамка се dashed
  • border-style: dotted solid double;
    • горната рамка е dotted
    • наляво и надясно рамките са solid
    • долната рамка е double
  • border-style: dotted solid;
    • горни и долни рамки са dotted
    • наляво и надясно рамки са solid
  • border-style: dotted;
    • всички четири рамки са dotted

По същия начин може да използвате пропърти за определяне на цвят и дебелина.


Border – Shorthand пропърти

Както прочетохте вече, много неща трябва да се вземат предвид при стилизирането на рамки. Може да използваме съкратено пропърти и да определим всички стилове наведнъж. По този начин се избягва повтаряемост и кода изглежда по-приличен. Пропъртито border е съкратен вариант на останалите:

  • border-width
  • border-style (ЗАДЪЛЖИТЕЛНО)
  • border-color
Опитайте сами »

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

Определя стила на долната рамка Този пример показва как да стилизираме долната рамка.

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

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

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


Всички CSS пропъртита за рамки

Пропърти Описание
border Задава всички 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-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 Деклариране на ширина на четирите рамки