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 пропъртита за рамки