Пришло поговорить о рамках. Свойства рамок в CSS будут такими:


Свойство BORDER-WIDTH

Этим свойством мы задаем толщину нашей рамки. Значение следует указывать в пикселях, но также можно указывать ключевыми словами thin (2px) , medium(4px) и thick(6px). На рисунке ниже представлен пример того, какая толщина у скольки пикселей:

На рисунке приведены значения ширины от 1 до 10 пикселей.

Свойство BORDER-COLOR

Свойство, отвечающее за цвет. Значение задаем так же как и всегда: «#ffffff», или «black».

Свойство BORDER-STYLE

Это свойство вида рамки. Чуть ниже я приведу 8 основных значений этого свойства. Все рамки в примере выполнены цветом black и шириной 6 px .

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

Вот пару примеров стилей:

h1 {
border-width: 6px;
border-style: dotted;
border-color: blue;
}

h2 {
border-width: 23px;
border-style: inset;
border-color: green;
}

p {
border-width: 23px;
border-style: solid;
border-color: gold;
}

Или такой вариант:

h1 {
border-width: 12px;
border-style:outset ;
border-color: green;
}

h2 {
border-width: 43px;
border-style: dashed;
border-color: black;
}

h3 {
border-width: 23px;
border-style: double;
border-color: blue;
}

p {
border-width: 12px;
border-style: dotted;
border-color: red;
}


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

У рамки так же есть сокращенная форма border . Сначала указываем толщину, после пробела стиль, а затем после пробела цвет. Пример азписывается так:

h1 {
border:40px outset gold;
}

h2 {
border:30px dashed green;
}

h3 {
border: 26px double red;
}

P {
border:5px dotted black
}


Примеры:

В пример указанных выше, если после border добавить одно из ключевых слов (top, right, bottom, left) то удастся регулировать параметры рамки со всех сторон (верх, право, низ, лево). Вот пример:

h1 {
border-top-width: 40px;
border-top-style:solid ;
border-top-color: gold;

border-right-width: 30px;
border-right-style:dashed ;
border-right-color: green;

border-bottom-width: 20px;
border-bottom-style:dashed;
border-bottom-color: red;

border-left-width: 26px;
border-left-style:solid ;
border-left-color: black;
}

В сокращенном виде это будет выглядеть карсивее:

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

Так же все это можно скомбинировать:

h1 {
border: 40 solid gold;
border-bottom: 20px solid red;
}

h2 {
border: 40px solid gold;
border-bottom-color: red
}

Это легкий урок, думаю, здесь мы разобрались. Идем дальше.