CSS рамки

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

Вид на рамка

Командата за вид на рамка се задава с border-style и може да приема следните стойности:

• none: без рамка
• dotted: рамка, изградена от точки
• dashed: рамка - прекъсната линия
• solid: рамка с една плътна линия
• double: рамка с две плътни линии
• groove: триизмерна вдлъбната рамка
• ridge: триизмерна изпъкнала рамка
• inset: триизмерна обърната навътре рамка
• outset: триизмерна обърната навън рамка

Вижте пример

Дебелина на рамка

Свойството дебелина на рамка се задава с border-width, а за стойност може да се използват както числа (в пиксели), така и една от следните думи: thin, medium, thick, които браузърът ще интерпретира автоматично, за да създаде съответно тясна, нормална или дебела рамка. Обърнете внимание, че border-width ще бъде ефективно приложено само ако вече е указан вида на рамката (border-style). Опитай сам

Цвят на рамка

За задаване на цвят на рамка се използва border-color. Аналогично на цвета на текста, самите стойности за цвят на рамка може да бъдат:

• валидно име на цвят, напр. olive за маслено зелено;
• RGB стойност, напр. rgb(0,255,0)
• HEX стойност, напр. #00FF00

Указанието за цвят на рамка ще бъде валидно само ако вече е указан вид на рамката (border-style). Опитай сам

Индивидуални стилове за отделните страни на рамката

Можете да укажете различен вид на рамка за всяка от четирите страни, използвайки следните думи:

• border-top-style (горна рамка)
• border-right-style (дясна рамка)
• border-bottom-style (долна рамка)
• border-left-style (лява рамка)

Аналогично се задават и стойности за цвят и дебелина на отделните страни: заместете style съответно с color или width (напр. border-top-color задава цвят за горната рамка). Опитай сам

Стил на рамка: съкратен запис

Всички свойства на рамката може да бъдат указани по съкратен начин, използвайки думата border:

border: 3px dotted orange;

Редът на стойностите е дебелина, вид, цвят, но с изключение на задължителната стойност за вид на рамка не е необходимо всички стойности да бъдат задавани (ако някоя стойност бъде изпусната, браузърът ще използва стойността по подразбиране). Опитай сам