Войти
» » » Рамки в CSS

Рамки в CSS

Рамки в CSS

В этой статье мы разберём как правильно оформлять рамки различный блокоых элементов в CSS. Их существует большое множество, мы рассмотрим только основные, которые чаще всего используются в написании сайтов.
Рамки как и другие элементы в CSS содержат свойства:

BORDER-WIDTH

Данное свойство отвечает за толшину рамки, проще говоря толщину границ или боковых линий. Задавать толщину можно словами, но удебнее в пикселях, на рисунке ниже приведены размеры границ рамки от 1 до пикселей.

Пример написания в CSS:
p {border-width: 2px; } – в данном случае толщина рамки будет ровняться 2 пикселям.

BORDER-COLOR

Это свойство задаёт цвет рамки, можно прописывать словами, но удебнее в шестнадцатеричном значении.

Пример:
p { border-color: blue;} – рамка будет синего цвета
p { border-width: 2px; border-color: blue; } – рамка будет синего цвета, толщиной 2 пикселя.

BORDER-STYLE

Самое интересное свойство, определяет какого вида будет рамка, их очень много мы расмотрим вамые популярные, ниже на картинке вид некоторых из них:
SOLID Рамка состоит из сплошной линии
DOTTED Точечная рамка
DASHED Пунктирная рамка
DOUBLE Рамка из двойной сплошной линии
GROOVE Рамка как бы из вдавленной линии, с имитацией объема
RIDGE Рамка отображается выпуклой линией с имитацией объема
INSET Рамка отображается так, что весь блок кажется вдавленным
OUTSET Рамка отображается так, что весь блок кажется выпуклым

На заметку: минимальная толщина рамки типа double должна равняться 3 px, иначе она будет отображаться некорректно.

Пример:
p {border-width: 2px; border-style: solid; border-color: blue;} – сплошная рамка толщиной 2 пикселя, синего цвета.
p {border-width: 1px; border-style: dotted; border-color: blue;} – точечная рамка толщиной 1 пиксель, синего цвета.

Сокращенная форма – border

Как и в большенсве других форм у рамок существует сокращённая форма, но нужно соблюдать последовательность значений: толщина, стиль, цвет (все значения прописываются через пробел).

Примеры:
h1 {border:30px outset red;}
h2 {border:20px dashed gold;}
h3 {border: 16px double green;}
P {border:1px dotted blue}

Думаю здесь понятно.

Теперь рассмотрим случаи когда разные стороны рамки нужно зделать разного вида или просто прото нужно выделить только одну или несколько сторон блока.

Для этого нужно просто после свойства «border» прописать ключевое слово (top, right, bottom, left) можно регулировать параметры рамки с разных сторон соответственно (верх, право, низ, лево). Ну вот например можно сделать так:

h1 {
border-top: 30px solid red;
border-right: 20px dashed gold;
border-bottom: 10px dashed green;
border-left: 40px solid blue;
}

h2 {
border: 30px solid red;
border-bottom-color: green
}