Уроки HTML+CSS: Стили для рамок и границ

Сегодня мы с вами разберем свойства, которые применяются для рамок. Эти рамки вы можете применять как для строчных, так и для блочных элементов.

border-width – ширина границы

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

Это свойство указывает толщину границы, но у вас не получится прописать границу, если у вас не указан стиль границы. Об этом смотрите ниже.

div{
  border-width: 1px;
}

border-style – задает стиль рамки

none	Значение по умолчанию, означает отсутствие рамки. Также убирает рамку элемента из группы элементов с установленным значением данного свойства.
hidden	Эквивалентно none.

Есть большое количество видов рамок. Давайте разберем их ниже.

Я задал для блока произвольную высоту и ширину. Так же для примера я задал толщину границы рамки 2px.

dotted – Задает границу состоящую из точек.

div {
   border-width: 2px;
   border-style: dotted;
}

dashed – пунктирная граница

div {
   border-width: 2px;
   border-style: dashed;
} 

solid – сплошная линия

div {
   border-width: 2px;
   border-style: solid;
}  

double – двойная сплошная граница

Для этого значения, нужно увеличить ширину границы.

div {
   border-width: 5px;
   border-style: double;
}   

groove – граница с тенями по всей границе

Эта граница выглядит как будто проваленная внутрь. Как канавка.

div {
   border-width: 5px;
   border-style: groove;
}

ridge – выпуклая граница

Эта граница наоборот выпуклая.

div {
   border-width: 5px;
   border-style: ridge;
}

inset – граница с тенью в верхнем левом углу

div {
   border-width: 5px;
   border-style: inset;
}

outset – граница с тенью в нижнем правом углу.

div {
   border-width: 5px;
   border-style: outset;
}

Вы можете задать для каждой из сторон свой тип границы. Первое значение задает верх, второе – правую строну, третье – низ, четвертое – левую строну. Например так

div {
   border-width: 5px;
   border-style: dotted dashed solid groove;
}

border-color – задает цвет границы

Цвет задается в шестнадцатеричной системе или по названию цвета, аналогично свойству color.

border-color: #000;

border-color: red;

Простой способ создания границы у элемента

Весь представленный выше код можно прописать в одну строку. Для этого нужно прописать свойство border. Первое значение задает ширину границы, второе – стиль границы, третье – цвет границы.

Когда мы задаем толщину границы, мы можем разделись значение на 4. В таком случае первое отвечает за верх, второе – за правую строну, третье отвечает за низ, четвертое – за левую сторону.

border: 1px 1px 1px 1px solid green;

или вы можете указать 2 значения. Первое значение отвечает за низ и верх, второе – за правую и левую сторону.

border: 5px 3px double #000;

и наконец есть третий вид написания, состоящий из 3 значений. Первое – верх, второе – правая и левая часть , третье – низ.

 border: 5px 3px 2px double #000; 

outline – внешняя граница элемента

Выше мы говорили о внутренней границе и о свойстве border. Но для элементов можно задавать и внешнюю границу. За это отвечает outline .

Один интересный момент, если у блока не задан внешний отступ (margin), то границы не будет. Это нужно запомнить и поэтому я задам дополнительный отступ.

outline: 1px solid red;
margin: 5px;

Все вышеперечисленные свойства которые используются для создания внутренней границы, можно использовать и для внешней границе.

border-radius

Свойство border-radius добавляет скругление для краев у элементов. Округление элементов задается в px.

border-radius: 10px;