Обзор возможностей свойства границ (border) в CSS

Многие из вас, без сомнения, уже используют CSS границы при дизайне вебсайтов. Ведь с приходом CSS3 многие, ранее довольно сложные вещи, стали значительно проще. Например, для отображения кругов или стрелочек, ранее мы прибегали к абсолютно позиционированным фоновым картинкам, или спрайтам. Теперь же это делается буквально несколькими строками кода в файле CSS-стилей.

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

 

 

Краткое определение: CSS-свойство «border» служит для придания элементу границы (рамки) и описывает ее стиль, толщину и цвет. Как правило, элементом здесь выступают блочные контейнеры (например: div, p, h1-h6 и т.д.).

 

 

Основы

Наиболее часто используемая запись для свойства примерно следующая:

border: 1px solid #000;

 

Эта запись придаст элементу рамку толщиной в 1px, сплошную, и залитую черным цветом (#000).

Также эту строку можно записать и в более расширенном варианте, когда мы укажем каждое значение свойства border отдельно:

div {
border-width: 1px;
border-style: solid;
border-color: #000;
}

 

Поскольку блочный элемент веб-страницы можно представить в виде прямоугольника, естественным будет предположение, что разработчики CSS позаботились о всех его четырех сторонах. Верно! С этой задачей и справляются отдельные значения для каждой из стороны блока-прямоугольника.

Например, если мы возьмем значение border-width, то его можно «разложить» на несколько записей: border-top-width, border-left-width, border-bottom-width, border-right-width.

Или же, немного расширить его короткую запись (border-width: 1px;):

border-width: 1px 1px 1px 1px;

 

То есть мы получаем полный контроль над каждой стороной элемента!

P.S. Значение в стилях читаются по часовой стрелке: верх, право, низ, лево.

 

Закругление рамки-границы (border-radius)

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

Также, как и предыдущие свойства, свойство border-radius можно записать в сокращенном варианте, например:

border-radius: 7px;

 

а можно и более подробно:

border-radius: 7px 7px 7px 7px;

 

или еще более подробно:

border-top-left-radius: 7px;
border-top-right-radius: 7px;
border-bottom-right-radius: 7px;
border-bottom-left-radius: 7px;

 

В качестве примера возможностей свойства, нарисуем лимон только при помощи CSS:

.limon {
width: 225px;
height: 215px;
border: 3px solid #ff0;
border-radius: 10px 155px 30px 145px;
}

 

 

 

Свойство изображения (стиль) для рамки

Существует несколько общих правил для придания границе стиля. Это: dotted (пунктир), dashed (штриховка), solid (сплошная линия), double (двойная линия), groove (линия с выемкой), ridge (линия с коньком), inset (внутренний скос), и outset (внешний скос).

Но мы также можем вместо этих стилей рамки использовать, например, какую-то картинку.
Для этих целей служит свойство border-image-source.
В качестве значения свойства может выступать ссылка на нужную картинку:

div {
  border-image-source: url('kartinka.png');
}

 

Или же градиент:

div {
  border-image-source: linear-gradient(20deg, #2582e1 20%, #ff9933 80%);
}

 

В браузере получится нечто подобное:


После того как вы используете изображение в качестве свойств границы, применение его делается с помощью свойства border-image-slice (задается в числах или процентах, без указания единиц измерения, т.е. не нужно писать дополнительно px).
Например:

div {
/* значения для: top right bottom left */border-image-slice: 10 8 15 7; 
}

 

Также желательно указывать свойство border-image-width, т.е. ширину изображения для рамки (например, в пикселях, или в процентах от размера изображения).

Короткая запись всех рассмотренных выше свойств изображения в качестве рамки выглядит примерно так:

div {
/* border-image-source, border-image-slice, /border-image-width/, border-image-outset, border-image-repeat */  border-image: linear-gradient(20deg, #2582e1 20%, #ff9933 80%) 5 / 25px / 0 round;
}

 

Несколько границ

Есть много методов для того, чтобы применить нескольких границ к элементу. Рассмотрим основные.

 

Наиболее популярный метод создания двух границ – воспользоваться свойством outline (контур, внешний скос).
Например,

div {
border: 25px solid #ff9933;
outline: 25px solid #2582e1;
}

 

Следующий способ – с помощью свойства Box-Shadow. Так можно создать бесконечное число границ, указывая их параметры через запятую (при наложении первая в списке будет выше, последняя – ниже).
Например,

div {
border: 25px solid #ff9933;
box-shadow: 0 0 0 5px #fff, 0 0 0 15px green, 0 0 0 20px #cc00cc;
}

 

3-й способ: с помощью Псевдо-элементов
Это, возможно, не самый элегантный подход, но он, безусловно, выполняет свою работу. Правда, с этим методом легко запутаться и перепутать порядок, в котором будут применяться цвета к границам.
Используйте псевдо-элементы :before и :after, а также сочетание предыдущих методов, чтобы придать элементу несколько рамок-границ.
Пример кода:

div {
width: 500px; 
height: 500px; 
background: #e3e3e3; 
position: relative; 
border: 25px solid #ff9933;
}
/* Создаем два блока с такой же шириной контейнера */div:after, div:before {
  content: '';
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
}
 
div:after {
  border: 10px solid blue;
}
 
div:before {
border: 15px solid red;
outline: 5px solid yellow;
}

 

 

Напишите в комментариях ниже, с помощью какого способа вы придаете рамку-границу элементам.

 

Share

Последние посты

Антуан де Сент-Экзюпери

Никогда не теряй терпения — это последний ключ, отпирающий двери Антуан де Сент-Экзюпери   Читать далее

28/03/2024

Сомерсет Моэм

Когда вы станете старше, вы поймете, что в мире можно хоть как-нибудь жить только при… Читать далее

27/03/2024

Михаил Грушевский

Все учатся своему родному языку, а наша беда такова, что нужно учить его больше, чем… Читать далее

26/03/2024

ТОП-5 надежных покерных обменников

Профессиональный покер – это многочисленные турниры и крупные суммы, что требует правильной настройки финансовых инструментов.… Читать далее

25/03/2024

Гай Юлий Цезарь

Все вокруг стремятся истребить врагов, но не объединиться с друзьями Гай Юлий Цезарь   Читать далее

24/03/2024

Как выбрать оптимальный смартфон для ребенка?

Сегодняшние дети сталкиваются с технологиями с самого раннего возраста, и смартфон уже давно перестал быть… Читать далее

22/03/2024