border: как сделать рамку в CSS

Создание различных стилей границ вокруг элементов HTML является одной из важных составляющих веб-дизайна. В CSS есть предназначенное для рисования границ свойство — border. Границы можно использовать не только в декоративных целях, но и в функциональных, таких как создание эффектов наведения или выделение важного контента и разных разделов страницы. В этой статье мы рассмотрим различные возможности свойства border с использованием интерактивных примеров, а также продемонстрируем полезные решения, применяя границы CSS.

Содержание

Свойство border
Толщина границ: свойство border-width
Стиль границ: свойство border-style
Цвет границ: свойство border-color
Стилизация границ по отдельности
Другие свойства границ
border-image
border-radius
Примеры с границами в CSS
Треугольник с помощью border
Рисование лимона
Анимированная граница кнопки
Заключение

Свойство border

CSS-свойство border позволяет установить ширину, стиль и цвет границы элемента на странице. Оно включает в себя три других свойства: border-width для ширины, border-style для стиля и border-color для цвета границ. Свойство border используется как краткая запись комбинации трех упомянутых свойств, что является удобным способом установить границу элемента с помощью одной строки кода CSS.

Свойства, которые включены в border, записываются в следующем порядке: border-width, border-style и border-color. Например, если вы хотите установить границу элемента в виде сплошной черной линии (solid) шириной 2 пикселя, вы можете использовать следующий код CSS:

.someExample {
    border: 2px solid #000;
}

Этому свойству можно задавать меньшее количество значений, тогда отсутствующие значения будут установлены по умолчанию. Например, сплошную границу толщиной 4px с цветом по умолчанию можно задать следующим образом:

.defaultExample {
    border: 4px solid;
}

При использовании border важно помнить, что важен порядок значений: сначала нужно указать ширину, затем стиль, а после — цвет границы. Если не следовать этому порядку, код CSS может работать не так, как от него ожидается.

CSS-свойства border-width, border-style и border-color также можно использовать и по отдельности. Далее разберем подробно каждое из них.

Толщина границ: свойство border-width

Свойство border-width задает ширину границы HTML-элемента. Для него можно установить определенное значение в пикселях или одно из предопределенных значений:

thin: тонкая, равна 1 пикселю;
medium: средняя ширина, эквивалентно 3 пикселям;
thick: толстая, составляет около 5 пикселей;
(единицы измерения): ширина границы в допустимых единицах CSS (px, em и других);
initial: устанавливает ширину границы в исходное значение, которое обычно является medium;
inherit: ширина наследует свое значение от родительского элемента.

Единицы измерения могут быть любым допустимым неотрицательным значением длины CSS, например, 2px, 1em или 0.5rem. Вы также можете использовать значения, превышающие размер элемента, для создания эффекта «внешней» границы.

Задавая свойство border-width, имейте в виду, что оно влияет на размер и расположение элемента. Если вы увеличите ширину границы, общий размер элемента также увеличится, что может повлиять на его позиционирование и выравнивание. Также стоит отметить, что некоторые браузеры могут отображать границы по-разному, особенно на дисплеях с высокой плотностью, где плотность пикселей больше 1. В этих случаях граница в 1 пиксель может казаться размытой или нечеткой, что вызывает необходимость использовать большее значение для достижения четкого отображения.

Поэкспериментировать с различной толщиной границ можно с помощью следующего интерактивного примера:

Width:

Стиль границ: свойство border-style

Свойство border-style определяет стиль границы HTML-элемента. Для него можно установить следующие значения:

none: границы не должны отображаться;
hidden: это значение похоже на none, но используется специально для того, чтобы скрыть границу, сохраняя при этом пространство, которое она будет занимать;
dotted: граница, состоящая из точек;
dashed: граница со штрихами;
solid: сплошная линия;
double: две параллельные линии;
groove: граница с трехмерным эффектом вдавливания;
ridge: линия с 3D-эффектом выпуклости;
inset: весь блок кажется вдавленным в страницу;
outset: создает эффект выпуклости всего блока.

Добавим в наш интерактивный пример свойство border-style. Протестируйте различные сочетания ширины и стилей границ:

Style:

Width:

Цвет границ: свойство border-color

Свойство border-color используется для установки цвета границы HTML-элемента. Оно может принимать следующие доступные значения:

(формат цвета): задает для границы определенный цвет с помощью ключевого слова (например, red), шестнадцатеричного значения (#2F9879) или значений формата rgb, rgba, hls, hlsa (например, rgb(255, 0, 0));
transparent: задает прозрачный цвет границы — он наследует цвет фона элемента или родительского элемента;
initial: устанавливает цвет границы на его начальное значение, которое является черным;
inherit: наследует значение от родительского элемента.

При установке свойства border-color важно помнить, что цвет границы может повлиять на общий внешний вид и контрастность элемента. Например, если у вас темный фон, установка темного цвета для свойства border-color может сделать границу менее заметной и уменьшить контраст между границей и фоном.

Дополним интерактивный пример свойством border-color:

Style:

Width:

Color:

Стилизация границ по отдельности

В CSS также можно задавать стили не только сразу всей границе элемента, но и отдельно каждой стороне: верхней, нижней левой и правой. Для этого всем рассмотренным выше свойствам добавляются слова, характеризующие конкретную сторону границы: top — верхняя сторона, bottom — нижняя, left — левая, right — правая:

разновидности свойства border для каждой из сторон границы: border-top, border-bottom, border-left, border-right;
разновидности border-width: border-top-width, border-bottom-width, border-left-width, border-right-width;
разновидности border-style: border-top-style, border-bottom-style, border-left-style, border-right-style;
разновидности border-color: border-top-color, border-bottom-color, border-left-color, border-right-color.

Пример:

.differentSidesExample {
    border-top: 2px solid red;
    border-right: 4px dotted blue;
    border-bottom: 6px dashed green;
    border-left: 8px double yellow;
}

Другие свойства границ

Помимо вышеупомянутых свойств, CSS предоставляет некоторые другие свойства для создания различных эффектов границы. Далее рассмотрим эти свойства.

border-image

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

ссылка на изображение (свойство border-image-source);
способ его нарезки (border-image-slice);
толщина границы для картинки (border-image-width), которая по умолчанию равна толщине границы элемента;
расстояние смещения за пределы границы элемента (border-image-outset);
способ повторения изображения (border-image-repeat).

Свойство border-image-slice принимает до четырех значений, которые указывают, как должно быть нарезано изображение. При указании одного значения условия обрезания применяются ко всем сторонам. Если задать два значения, первое применится к верхней и нижней стороне, а второе — к каждой из боковых. Соответственно, четыре значения позволяют установить правила обрезания для каждой стороны начиная с верхней и далее по часовой стрелке.

Это свойство делит изображение на девять областей: четыре угловые, четыре боковые, и одна центральная — область заполнения. Четыре угловые области всегда сохраняются и не растягиваются. Четыре боковые области могут растягиваться или повторяться в зависимости от свойства border-image-repeat. Область заливки можно растянуть или повторить, чтобы заполнить оставшееся пространство между угловыми и боковыми областями.

Настраивая значения border-image-slice для каждой стороны границы, вы можете контролировать ширину каждого фрагмента и то, каким образом изображение границы делится на девять зон. Например, если вы установите верхнее значение на 20%, оно отрежет верхние 20% изображения и использует их для области верхней стороны, а оставшиеся 80% будут использоваться для области заполнения. Если вы установите значение для правой стороны 10%, оно будет отсекать правые 10% изображения и использовать их для правой стороны границы, а оставшиеся 90% будут использоваться для области заливки.

Свойство border-image-repeat используется для указания того, как изображение должно повторяться или растягиваться, чтобы заполнить пространство. Оно может принимать одно или два значения в виде ключевых слов. Первое значение отвечает за способ повторения по горизонтали, второе — по вертикали. Возможные значения:

stretch (по умолчанию) – нарезки изображения растягиваются, чтобы заполнить пространство;
repeat – нарезка повторяется для заполнения пространства;
round – нарезанная область повторяется и, в случае если не хватает пространства очередной нарезкой, то происходит растяжение для заполнения этого пространства;
space – нарезка повторяется, при нехватке пространства добавляется пустая область одинаковой длины между нарезками.

Пример:

.borderImageExample {
    width: 160px;
    height: 160px;
    border-width: 30px;
    border-style: solid;
    border-image: url('path_to_image/frame.jpg') 15% / 1 / 0 round;
}

Интерактивный пример для border-image:

Slice:

Repeat:

Width:

Outset:

border-radius

Свойство border-radius позволяет создавать закругленные углы на границах элементов. Этому свойству можно указывать от одного до четырех значений. Если указано одно значение — оно применяется ко всем углам элемента. Чтобы задать каждому углу отдельный радиус закругления, нужно установить четыре значения, которые будут применяться, по часовой стрелке начиная с верхнего левого угла. Вариант с тремя значениями работает следующим образом: первое значение задается левому верхнему углу, второе — правому верхнему и левому нижнему, третье — правому нижнему. Два значения этого свойства устанавливают радиус закругления противоположным углам: первое — левому верхнему и правому нижнему, второе — правому верхнему и левому нижнему.

Пример:

.borderRadiusExample {
    border-radius: 10px 30px 50px 80px;
}

С помощью border-radius легко можно создать круг (из квадрата) или овал (из прямоугольника), используя значение 50%:

.borderRadiusExample {	
    border-radius: 50%;
}

Интерактивный пример:

Style:

Width:

Color:

Radius:

Примеры с границами в CSS

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

Треугольник с помощью border

Если вы ищете способ создать треугольник в CSS, например, для облака текста в секции отзывов на сайте, нет необходимости прибегать к использованию изображений — треугольник легко создается с помощью свойства border.

HTML:

<div class="demoTestimonials">
  <div class="demoTestimonials__single">
    <div class="demoTestimonials__triangle"></div>
    <div class="demoTestimonials__content">
      <h3>Треугольник с помощью border</h3>
      <p>"С помощью свойства border можно создать треугольник, который может использоваться, например, для стилизации
        секции отзывов на сайте. К элементу, который имеет нулевую ширину и высоту, мы добавляем границы: три из них -
        прозрачные, одна граница заполнена цветом, благодаря чему мы видим треугольник. С помощью абсолютного позиционирования
        мы можем установить этот треугольник в любое место секции. В этом примере мы разместили треугольник слева."</p>
    </div>
  </div>
</div>

CSS:

.demoTestimonials {
    padding-left: 10%;
}

.demoTestimonials__single {
    position: relative;
    padding: 30px;
    border: 2px solid #333;
    border-radius: 10px;
    background-color: #000;
    margin-bottom: 30px;
}

.demoTestimonials__triangle {
    position: absolute;
    top: 20px;
    left: -20px;
    border-top: 20px solid transparent;
    border-right: 20px solid #000;
    border-bottom: 20px solid transparent;
}

.demoTestimonials__content h3 {
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 10px;
}

.demoTestimonials__content p {
    margin: 0!important;
    font-size: 16px;
    line-height: 1.5;
}

Демо:

Треугольник с помощью border

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

Рисование лимона

С помощью border можно нарисовать лимон способом, указанным ниже.

HTML:

<div class="demoLemon">
  <div class="demoLemon__inner">
    <div class="demoLemon__example"></div>
  </div>
</div>

CSS:

.demoLemon__example {
    width: 180px;
    height: 180px;
    background: yellow;
    border-radius: 16px 110px;
}

Демо:

Анимированная граница кнопки

Границы в CSS можно создавать не только с помощью свойства border. Используя некоторые манипуляции с элементами HTML, можно симулировать границы, создавая красивые эффекты. Например, анимацию границы при наведении курсора мыши на кнопку, как показано в нижеследующем примере.

HTML:

<button class="border-snake">
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    Кнопка
</button>

CSS:

.border-snake {
    --button-width: 160px;
    --button-height: 60px;
    --button-perimeter: calc(calc(var(--button-width) * 2) + calc(var(--button-height) * 2));
    --border-width: 2px;

    margin: 20px 0;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: var(--button-width);
    height: var(--button-height);
    font-size: 16px;
    font-weight: bold;
    border: none;
    background-color: #00c1c5;
    color: #fff;
    overflow: hidden;
    outline: none!important;
}

.border-snake span {
    background-color: #fff;
    position: absolute;
    transition: transform 1s linear;
}

.border-snake:hover {
    cursor: pointer;
}

.border-snake span:nth-child(1) {
    top: 0;
    left: calc(var(--button-perimeter) * -1);
    height: var(--border-width);
    width: var(--button-perimeter);
}

.border-snake:hover span:nth-child(1) {
    transform: translateX(var(--button-perimeter));
}

.border-snake span:nth-child(2) {
    top: calc(var(--button-perimeter) * -1);
    right: 0;
    height: calc(var(--button-width) + calc(var(--button-height) * 2));
    width: var(--border-width);
}

.border-snake:hover span:nth-child(2) {
    transform: translateY(var(--button-perimeter));
}

.border-snake span:nth-child(3) {
    bottom: 0;
    right: calc(var(--button-perimeter) * -1);
    height: var(--border-width);
    width: calc(var(--button-width) + var(--button-height));
}

.border-snake:hover span:nth-child(3) {
    transform: translateX(calc(var(--button-perimeter) * -1));
}

.border-snake span:nth-child(4) {
    bottom: calc(var(--button-perimeter) * -1);
    left: 0;
    height: var(--button-height);
    width: var(--border-width);
}

.border-snake:hover span:nth-child(4) {
    transform: translateY(calc(var(--button-perimeter) * -1));
}

Демо (наведите курсор на кнопку):

Заключение

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

Свойство border: создание границ в CSS

Свойство border

Толщина границ: свойство border-width

Стиль границ: свойство border-style

Цвет границ: свойство border-color

Стилизация границ по отдельности

Другие свойства границ

border-image

border-radius

Примеры с границами в CSS

Треугольник с помощью border

Треугольник с помощью border

Рисование лимона

Анимированная граница кнопки

Заключение