Как сделать границу css

Граница в CSS

Так как элемент HTML отображается в виде прямоугольника, у элемента может быть до четырёх границ: сверху, снизу, слева и справа. Вы можете установить границу со всех сторон сразу или на каждой стороне отдельно.

Типы границ и их положение

Граница в CSS состоит из трёх свойств:

• border-color определяется с помощью единиц цвета;
• border-style может быть solid , dashed , dotted и др.;
• border-width определяется с помощью единиц размера.

Также граница может быть задана на четырёх возможных сторонах:

Сокращённое свойство border позволяет определить все три свойства сразу:

Единственная граница

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

Что касается свойства border , у каждой стороны есть своя сокращённая версия:

Что делать, если мне надо три границы? Должен ли я установить их отдельно?

Как вы уже догадались, самый быстрый способ получить три границы — это установить все четыре из них, а затем удалить ту, которую вы не хотите:

Сокращённые комбинации

Поскольку существуют три свойства границы и четыре положения границ, получается 12 возможных комбинаций:

border	border-color	border-style	border-width
border-top	border-top-color	border-top-style	border-top-width
border-bottom	border-bottom-color	border-bottom-style	border-bottom-width
border-left	border-left-color	border-left-style	border-left-width
border-right	border-right-color	border-right-style	border-right-width

Доступно довольно много свойств. В конечном итоге вы будете обычно использовать только пять сокращённых версий:

Источник

Все о свойстве 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

В этой статье изучим CSS-свойства для стилизации границ элемента: border , border-width , border-style , border-color , border-radius , border-image , border-image-source , border-image-slice , border-image-width , border-image-outset и border-image-repeat .

border — оформление границ элемента

CSS-свойство border предназначено для управления оформлением границ элемента. Границы располагаются перед фоном элемента.

border – это универсальное свойство для стилизации границ (рамки) вокруг элемента. Оно позволяет установить сразу три характеристики: толщину границ ( border-width ), стиль линий ( border-style ) и цвет ( border-color ).

border состоит из трёх других свойств (в скобках приведены значения каждого из них, которые они имеют по умолчанию):

• border-width (medium);
• border-style (none);
• border-color (currentcolor).

Свойство border устанавливает стили сразу для всех четырёх границ. В отличие от него border-width , border-style и border-color могут принимать до 4 значений, и тем самым стилизовать каждую из сторон по-отдельности.

При установке меньшего количества значений:

border-width – толщина границы

CSS-свойство border-width определяет толщину границы. По умолчанию данное свойство имеет значение medium , что эквивалентно 3px.

Задавать значение можно с помощью ключевых слов: thin (эквивалентно 1px), medium (3px) и thick (5px), а также используя различные единицы измерения: px, em, rem, vh, vw.

border-style – тип линии

CSS-свойство border-style предназначено для установки стилей границам.

• solid – сплошная непрерывная линия;
• none (по умолчанию) – без отображения границы;
• hidden – то же самое, что none , за исключением отображения границ у ячеек таблицы с border-collapse: collapse ;
• dashed – штриховая линия;
• dotted – линия из точек;
• double – двойная линия;
• groove – линия со вдавленным эффектом;
• ridge – линия с выпуклым эффектом;
• inset – добавляет эффект к границе таким образом, чтобы весь блок выглядел вдавленным;
• outset – добавляет эффект к границе таким образом, чтобы весь блок выглядел выпуклым;

Отличие между border-style: none и border-style: hidden :

border-color – цвет линии

CSS-свойство border-color используется для установки цвета границам элемента. По умолчанию оно имеет значение currentcolor , т.е. наследует цвет элемента.

Задать определённый цвет границам можно разными способами, а именно с помощью:

• названия цвета, например: red , green и т.д.;
• шестнадцатеричного кода, например: #ff0000 , #00ff00 и т.д.;
• rgb() , rgba() , hsl() или hsla() ;
• transparent (прозрачный);

Если указать одно значение, то оно будет применено сразу к 4 границам (верхней, правой, нижней и левой).

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

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

В CSS имеются свойства, которые позволяют задать стиль определённой границы (top – верхней, right – правой, bottom – нижней и left – левой): border-top , border-right , border-bottom и border-left .

Кроме этого также доступны CSS-свойства для задания отдельных характеристик границ:

• для толщины: border-top-width , border-right-width , border-bottom-width и border-left-width ;
• для типа линии: border-top-style , border-right-style , border-bottom-style и border-left-style ;
• для цвета: border-top-color , border-right-color , border-bottom-color и border-left-color .

border-radius – закругление углов

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

border-radius работает даже если у элемента нет границ, т.к. его действие распространяется и на фон.

В основном border-radius используется с одним значением.

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

Кроме указания значений, с помощью единиц измерения для задания фиксированной длины (например: px, rem, em и т.д.), вы также можете использовать проценты.

В основном это используется для создания круга путем установки border-radius , равным 50%.

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

Пример, показывающий разницу между border-radius: 40px и border-radius: 40% применительно к прямоугольнику:

border-radius позволяет установить радиус скругления отдельно для каждого угла. Для этого необходимо перечислить значения через пробел (начиная с верхнего левого угла и далее двигаясь по часовой стрелке):

Кроме этого, скруглить отдельно каждый угол можно с помощью свойств border-top-left-radius , border-top-right-radius , border-bottom-right-radius и border-bottom-left-radius .

С двумя значениями:

С тремя значениями:

Кроме этого, border-radius позволяет создавать ассиметрично скруглённые углы. Осуществляется это с помощью косой черты.

Перед косой черты указываются значения, отвечающие за горизонтальные расстояния, а после — вертикальные.

border-image – изображение в качестве рамки

border-image – это CSS-свойство, которое позволяет установить в качестве границ элемента изображение или CSS градиент.

border-image можно применить к любому элементу, за исключением тегов, определяющих содержимое таблицы ( tr , th , td ) когда в качестве значения border-collapse установлено collapse .

border-image является краткой записью следующих пяти свойств:

• border-image-source (none);
• border-image-slice (100%);
• border-image-width (1);
• border-image-outset (0);
• border-image-repeat (stretch).

Таким образом, пример приведённый выше с помощью специальных CSS-свойств можно записать следующим образом:

Пример создания градиентной границы с помощью border-image :

border-image-source

border-image-source – задаёт изображение (посредством URL-адреса, URI-данных или встроенного SVG) или CSS градиент, который необходимо использовать для отрисовки границы. Значение по умолчанию: none .

border-image-slice

border-image-slice – сообщает браузеру, как необходимо «разрезать» изображение и тем самым определить области для отрисовки границ.

В процессе нарезки изображения образуется 9 областей: четыре угла, четыре стороны и центр.

• Области 1 – 4 используется всего один раз для отрисовки соответствующих углов границ элемента;
• Области 5 – 8 применяются для отрисовки соответствующих сторон границ, расположенных между углами. В зависимости от значения свойства border-image-repeat область исходного изображения может растягиваться, повторяться, масштабироваться или иным образом изменяться, чтобы соответствовать размерам элемента;
• Область 9 является центральной и по умолчанию отбрасывается.

Для использования области 9 в качестве фонового изображения элемента, необходимо добавить в любое место значения border-image-slice ключевое слово fill . При этом это фоновое изображение будет располагаться поверх фактического background .

Указывать смещения от краёв для нарезки изображения можно с помощью числа, так и процентов. При указании числа расстояние будет определяться количеством пикселей для растровых изображений или координатой для векторных. При указании процентов – в процентах от размера исходного изображения.

В border-image-slice можно установить от одного до четырёх значений:

• при указании одного значения, все четыре среза создаются на одинаковом расстоянии от соответствующих сторон;
• если два значения, то первая величина определяет срезы сверху и снизу, а вторая — слева и справа;
• когда указаны три значения, первое создает срез сверху, второе – слева и справа, а третье – снизу;
• при задании четырех значений, они определяют срезы соответственно сверху, справа, снизу и слева (т.е. по часовой стрелке).

При указании одного значения:

При указании двух значений:

Свойства border-image-repeat , border-image-width и border-image-outset позволяют задать каким образом эти области должны использоваться для формирования окончательной отрисовки границы.

border-image-width

Свойство border-image-width устанавливает толщину границы для изображения. По умолчанию имеет значение 1 (это означает, что она равна border-width ).

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

В border-image-width можно задать от одного до четырех значений:

• при указании одного значения, все четыре границы будут иметь одну эту толщину;
• при задании двух значений, первая величина будет определять толщину верхней и нижней границы, а вторая – левой и правой;
• когда указаны три значения: первая величина будет задавать толщину верхней границы, вторая – левой и правой, а третья – нижней;
• при задании четырёх значений: первая величина – за толщину верхней границы, вторая – правой, третья – нижней и четвёртая – левой (т.е. по часовой стрелке, начиная с верхней).

Задавать значение можно с помощью:

• числа – в этом случае, толщина границы будет вычисляться как значение border-width умноженное на это число;
• px и других единиц – в соответствии с указанными единицами;
• процентов (%) – толщина границы будет вычисляться в процентах относительно размера блока;
• ключевого слова auto – толщина границы берётся из border-image-slice (если подходящего размера нет, то используется то, что задано в border-width ).

Пример установки толщины границы для изображения в раза превышающей border-width :

border-image-outset

СSS-свойство border-image-outset задает расстояние, на которое нужно сместить границы наружу относительно их начального положения.

В border-image-outset можно задать от одного до четырёх значений:

• при задании одного значения, оно применяется ко всем четырем сторонам;
• если указаны два значения, то первое применяется к верхней и нижней границам, а второе — к левой и правой;
• указании трёх значений, первое применяется к верхней границе, второе — к левой и правой, а третье — к нижней;
• указаны четыре значения, они применяются к верхней, правой, нижней и левой границам в указанном порядке (по часовой стрелке).

Задавать значения можно с помощью:

• px, em, rem и других CSS единиц — в этом случае смещение будет определяться в соответствии с этим значением;
• числа – в этом случае расстояние будет равно этому число умноженное на значение border-width .

Пример, в котором сместим границы на величину, равную 1 * border-width :

border-image-repeat

CSS свойство border-image-repeat определяет как должны быть заполнены части границ, расположенные между углами в соответствии с областями 5 – 8 исходного изображения.

border-image-repeat может быть установлено с использованием одного или двух значений.

Когда указано одно значение, то оно применяет одно и то же поведение ко всем четырем сторонам. При задании двух значений, первое применяется к верхней и нижней сторонам, а второе — к левому и правому.

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

Пример border-image-repeat с одним значением:

Пример border-image-repeat с двумя значениями:

Источник