Сегодня мы с вами разберем свойства, которые применяются для рамок. Эти рамки вы можете применять как для строчных, так и для блочных элементов.
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;
Оставить комментарий