Что такое border в css

Все о свойстве border

Основы

Всем знакомо такое использование:

Это однопиксельная сплошная рамка. Немного меняем синтаксис:

Например у параметра border-width есть три параметра: thin, medium, thick:

Если необходимо менять цвет границы при наведении на объект:

Но так это реализовать проще и правильнее:

Border-Radius

border-radius — это новый параметр CSS3 для отображения закругленных углов, который корректно работает во всех современных браузерах, за исключением Internet Explorer 8 (и более старых версий).

Для каждого угла можно назначить свое закругление:

В приведенном примере необязательно назначать «0» border-top-right-radius и border-bottom-left-radius, если они не наследуют значения, которые должны быть изменены.
Всю конструкцию можно сжать в одну строку:

А вот как можно нарисовать лимон средствами CSS:

Здесь описаны самые простые и популярные примеры применения параметра border. Перейдем к более сложным.

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

Border-Style

solid, dashed, and dotted — самые популярные значения параметра border-style, но давайте рассмотрим другие, например, groove and ridge.

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

Outline

Самый популярный способ создания двойной границы — это параметр outline:

Этот способ отлично работает, но ограничен созданием двойной рамки. Если вам необходимо отобразить несколько границ элемента, то необходимо использовать другую технику.

Псевдоэлементы

Можно использовать такую конструкцию:

Возможно это не самое элегантное решение, однако оно работает

Box-Shadow

Еще один способ, с применением теней:

Изменение углов

К параметру border-radius можно применять два значения, используя «/», например:

Это то же самое, что:

Эта техничка бывает полезна, если необходимо имитировать искривление, а не закругление. Например, так можно получить эффект скрученной бумаги:

CSS фигуры

В следующих примерах предполагается такая разметка:

И такой базовый css:

Наиболее частым примером использования CSS фигур является отображение стрелок. Чтобы понять, как это работает, необходимо разобраться с использованием отдельного border-color для каждой стороны и установкой значения «0» для width и height:

А теперь оставляем только синий треугольник:

Создание Speech Bubble

Наша базовая разметка:

Теперь нужно расположить стрелку-треугольник в нужном месте. Вот наш цветной квадратик:

Оставляем только четверть квадратика:

Теперь перемещаем ниже и закрашиваем:

Примеры применения:

Вертикальное центрирование текста

минус использования line-height при вертикальном центрировании в ограничении текста одной строкой. Для решения этой проблемы, можно применить display: table к нашему Speech Bubble и display: table-cell к тексту:

Еще один пример нестандартного использования границ:

Источник

CSS-свойство border

Свойство border позволяет определять стиль, ширину и цвет границ рамки CSS :

Свойство border-style

Свойство border-style определяет тип отображения границы.

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

Свойство border-style может принимать от одного до четырех значений ( для верхней, правой, нижней и левой границ ).

Примечание: ни одно из представленных далее CSS-свойств для оформления границ не будет работать до тех пор, пока border-style не установлено.

Свойство border-width

Свойство border-width может иметь от одного до четырех значений ( для верхней, правой, нижней и левой рамки CSS ).

Свойство border-color

Свойство border-color используется для указания цвета четырех границ.

Цвет можно установить с помощью:

Свойство border-color может иметь от одного до четырех значений ( для верхней, правой, нижней и левой границ ).

Если значение border-color не установлено, то наследуется цвет элемента.

Border: отдельная стилизация границ

Приведенный выше пример даст тот же результат, что и:

Если у свойства border-style четыре значения:

• border-style: dotted solid double dashed;
o верхняя граница будет точечной.
o правая граница будет сплошной.
o нижняя CSS двойная рамка.
o левая граница будет в штрих.

Если у свойства border-style три значения:

• border-style: dotted solid double;
o верхняя граница будет точечной.
o правая и левая границы будут сплошными.
o нижняя граница будет двойной.

Если у свойства border-style два значения:

• border-style: dotted solid;
o верхняя и нижняя CSS рамки вокруг изображения будут точечными.
o правая и левая границы будут сплошными.

Если у свойства border-style одно значение:

• border-style: dotted;
o все четыре границы будут точечными.

Короткое свойство border

Чтобы сократить объем кода, значение для каждой отдельной границы можно указывать одним свойством:

Также можно выставлять свойства какой-то конкретной границы с одной из сторон:

Свойство border-radius используется для создания закругленных углов у CSS рамки вокруг текста или другого элемента.

Примечание: свойство border-radius не поддерживается в IE 8 и более ранних версиях.

Все свойства границ в CSS

Дайте знать, что вы думаете по этой теме статьи в комментариях. За комментарии, дизлайки, лайки, подписки, отклики огромное вам спасибо!

Источник

Границы в CSS (border, border-style, border-width, border-color, border-radius)

Стиль рамки (border-style)

— нет границ (толщина границ равна нулю)

— нет границ (то же самое, что и none)

— граница в виде точек

— граница в виде штрихов

— двойная сплошная линия

— линия в виде канавки или паза

— противоположность к groove

— рамка с тенью с одной стороны

Толщина рамки (border-width)

Цвет рамки (border-color)

Скругление краёв (border-radius)

Если у Вас появились вопросы по материалам на нашем сайте, то пожалуйста, пришлите нам их на почтовый адрес support@mousedc.ru. Мы обязательно ответим.

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

Коврик для мыши новым клиентам

Оплатите хостинг на год и получите удобный коврик

Помощь в переносе
с другого хостинга

Хотите переехать? Мы поможем перенести всё

Запишитесь на интенсивные курсы по созданию сайтов.

Приветствуем всех в нашем уютном дата центре! Мы предоставляем качественный и надёжный хостинг. У нас можно заказать домены и VPS, прочитать статьи по созданию сайтов и информационной безопасности. А из наших видео подкастов можно узнать о том, как продвигать и развивать iT-проекты.

Источник

CSS свойство border

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

Синтаксис и значения border

Например, создадим элемент и применим к нему свойства:

Значения свойства border здесь указывают, что у элемента должна быть рамка толщиной 2px, сплошная (solid), и красного цвета.

border-style

С помощью border-style можно сделать рамку в виде пунктирной линии, последовательности точек, придать ей объем, а всему блоку эффект выпуклости или вдавленности. Значение по умолчанию – none (отсутствие рамок).

Ниже перечислены значения, которые можно задать свойству, и эффекты, которые при этом появляются.

solid сплошная линия none по умолчанию – линии нет double двойная линия dashed пунктир dotted набор точек groove придание линии вогнутости ridge придание линии выпуклости inset эффект вдавленности блока outset эффект выпуклости блока

Примечание: при использовании стиля dashed соотношение длины штриха и ширины пробела зависит от браузера, в котором открыт сайт.

border-width

Толщина линии, образующей рамку, может задаваться как словом, так и количеством пикселей.

Числовая величина, измеряемая в px, em, rem, vh и vw. thin Эквивалент 1px medium Эквивалент 3px thick Эквивалент 5px

border-color

Цвет рамки можно задавать несколькими способами:

Цвет по умолчанию – black (черный). Установка значения transparent (border-color: transparent) означает полностью прозрачную рамку.

Примеры записи цвета:

border-radius

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

На примере ниже 2 квадрата. Один залит синим цветом, у вокруг второго нарисована рамка. Для элементов задано скругление:

Для каждого угла можно задать свой радиус скругления.

Так, для квадрата на примере ниже, задано такое свойство:

Значения устанавливаются для углов по часовой стрелке.

Количество значений может быть от 1 до 4. В таблице приведены результаты введения разного количества значений.

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

Необходимо иметь в виду, что при задании свойства border-radius форма блока остается прежней, то есть прямоугольной, и при больших значениях радиусов, запланированная рамка вокруг текста может попасть на сам текст.

Более детальные свойства

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

Источник

CSS Borders

Свойства границы CSS

Свойства CSS border позволяют задавать стиль, ширину и цвет границы элемента.

У меня есть границы со всех сторон.

У меня есть красная Нижняя граница.

У меня округлые границы.

У меня синяя левая граница.

Стиль границы

Свойство border-style указывает тип отображаемой границы.

Допустимы следующие значения:

Свойство border-style может иметь от одного до четырех значений (для верхней границы, правой границы, нижней границы и левой границы).

Пример

A groove border. The effect depends on the border-color value.

A ridge border. The effect depends on the border-color value.

An inset border. The effect depends on the border-color value.

An outset border. The effect depends on the border-color value.

Ширина границы

Свойство border-width задает ширину четырех границ.

Ширина может быть задана как конкретный размер (в px, PT, cm, EM и т.д.) или с помощью одного из трех предварительно определенных значений: тонкий, средний, или толстый.

Свойство border-width может иметь от одного до четырех значений (для верхней границы, правой границы, нижней границы и левой границы).

Пример

p.one <
border-style: solid;
border-width: 5px;
>

p.two <
border-style: solid;
border-width: medium;
>

p.three <
border-style: solid;
border-width: 2px 10px 4px 20px;
>

Цвет границы

Свойство border-color используется для задания цвета четырех границ.

Цвет может быть установлен:

Свойство border-color может иметь от одного до четырех значений (для верхней границы, правой границы, нижней границы и левой границы).

Если border-color не задан, он наследует цвет элемента.

Пример

p.one <
border-style: solid;
border-color: red;
>

p.two <
border-style: solid;
border-color: green;
>

p.three <
border-style: solid;
border-color: red green blue yellow;
>

Граница-отдельные стороны

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

В CSS есть также свойства для указания каждой из границ (верхняя, правая, Нижняя и левая):

Пример

Приведенный выше пример дает тот же результат:

Пример

Итак, вот как это работает:

Если свойство border-style имеет четыре значения:

Если свойство border-style имеет три значения:

Если свойство border-style имеет два значения:

Если свойство border-style имеет одно значение:

Граница-Сокращенное свойство

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

Чтобы сократить код, можно также указать все свойства отдельных границ в одном свойстве.

Свойство border является сокращенным свойством для следующих отдельных свойств границы:

Пример

Можно также указать все свойства отдельных границ только для одной стороны:

Источник