Уроки 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;