CSS-свойство border


Оглавление (нажмите, чтобы открыть):

Как сделать бордюр или рамку вокруг элемента HTML, CSS свойство border

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

Свойство CSS border является универсальным, это значит, что оно содержит различные другие свойства с префиксом border. Значения в свойстве border можно указать в любом порядке через пробел.

Какие есть CSS свойства из семейства border? Список приводится ниже:

  • border-bottom — управляет отображением только нижнего бордюра;
  • border-bottom-color – задает цвет нижнего бордюра;
  • border-bottom-left-radius — задает радиус скругления нижнего левого угла бордюра;
  • border-bottom-right-radius — задает радиус скругления нижнего правого угла бордюра;
  • border-bottom-style – задает стиль отображения нижнего бордюра;
  • border-bottom-width – задает ширину нижнего бордюра;
  • border-collapse — задает, как отображать границы вокруг ячеек таблицы, значения: collapse, separate, inherit;
  • border-color – задает цвет бордюра;
  • border-image – позволяет задать рисунок в качестве фона бордюра;
  • border-left — управляет отображением только левого бордюра;
  • border-left-color — задает цвет левого бордюра;
  • border-left-style — задает стиль отображения левого бордюра;
  • border-left-width — задает ширину левого бордюра;
  • border-radius – задает радиус скругления углов бордюра;
  • border-right — управляет отображением только правого бордюра;
  • border-right-color — задает цвет правого бордюра;
  • border-right-style — задает стиль отображения правого бордюра;
  • border-right-width — задает ширину правого бордюра;
  • border-spacing — устанавливает расстояние между границами ячеек в таблице;
  • border-style – задает стиль отображения бордюра, значения: none, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset, inherit;
  • border-top — управляет отображением только верхнего бордюра;
  • border-top-color — задает цвет верхнего бордюра;
  • border-top-left-radius — задает радиус скругления верхнего левого угла бордюра;
  • border-top-right-radius — задает радиус скругления верхнего правого угла бордюра;
  • border-top-style — задает стиль отображения верхнего бордюра;
  • border-top-width — задает ширину верхнего бордюра;
  • border-width – задает ширину бордюра.

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

border

Поддержка браузерами

12.0+ 4.0+ 1.0+ 1.0+ 3.5+ 1.0+

Описание

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

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

Примечание: для того чтобы установить рамки только на определенных сторонах элемента, используйте следующие свойства: border-top, border-bottom, border-left, border-right.

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

Свойство CSS border

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

1. Синтаксис CSS border

  • border-width — толщина рамки. Можно задавать в пикселях (px) или воспользоваться стандартными значениями thin, medium, thick (они отличаются только шириной в пикселях)
  • border-style — стиль выводимой рамки. Может принимать следующие значения
    • none или hidden — отменяет границу
    • dotted — рамка из точек
    • dashed — рамка из тире
    • solid — простая линия (применяется чаще всего)
    • double — двойная рамка
    • groove — рифленая 3D граница
    • ridge , inset , outset — различные 3D эффекты рамки
    • inherit — применяется значение родительского элемента
  • border-color — цвет рамки. Можно задавать с помощью конкретного названия цвета или в формате RGB (см. названия html цветов для сайта)

Примечание

Значения в свойстве CSS border можно задавать в любой последовательности. Чаще всего используют последовательность «толщина стиль цвет».

CSS border: radius, color, style и другие css свойства border

Я уверен, вы уже знакомы с css свойством border. Узнаете ли вы что-то новое, чего не знали раньше о css border? Что же, не только узнаете, но и увидите несколько новых вещей, которых вы никогда не знали прежде!

Не только CSS3 можно использовать для закругления уголков, но и чистый CSS код подойдет для создания сложных форм. Раньше вы могли использовать background-image, для создания впечатления закругленных уголков. Благодаря новым техникам использования border, мы можем сделать это на чистом css коде.

Основы использования css border

Наверняка, вы уже ознакомлены со стандартным использованием border свойства:

Код выше, выведет рамку в 1px, которая будет черного цвета. Легко и просто. Также можно немного расширить синтаксис:

Как дополнение, можно использовать специфические значения свойства border-width, три ключевых слова: thin, medium, thick.

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

Более элегантно и проще можно сделать следующим образом:

Как видите, расширенная техника также полезна, когда мы меняем только некоторые свойства: width, style, color и другие.

Border-Radius

Border-radius – это «золотое» свойство CSS3 – первое, наиболее распространенное свойство, которое стало практичным и полезным. Исключая IE8 и версии ниже, все браузеры отображают закругленные уголки с помощью этого.

Хотя, необходимо использовать специальные префиксы для Webkit и Mozilla, чтобы стилизация была корректной.

В сегодняшнее время, мы можем убрать специальные префиксы, и использовать стандартную форму border-radius.

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

В коде выше, устанавливая border-top-right-radius и border-bottom-left-radius на «нуль», можно добиться удивительных форм. Хотя элемент может наследовать некоторые свойства, которые нужно будет обнулить.

Наподобие как margin и padding, мы можем сжать синтаксис:

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

Идем далее основ

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

Сложные структуры css border

Существует множество техник для создания дизайна с применением сложных структур border. Для примера, разберем следующие…

Border-Style

Мы всегда используем наиболее известные свойства solid, dashed и dotted. Но существует парочка иных свойств border-style: groove и ridge.

Или в расширенном синтаксисе:

Хотя эти свойства и полезны, но они не являются основой создания сложных рамок.

Outline

Наиболее популярная техника создания двойной рамки – использование свойства outline.

Этот способ работает отлично, хотя, он нас ограничивает только двумя рамками. Иногда бывает нужно создать градиентный border, который состоит из многих слоев… как тогда?

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

Когда техники outline не достаточно, альтернативным средством является использование псевдо элементов :before и :after. С помощью которых можно добавить дополнительные рамки к элементу:

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

Box-Shadow

Интересным «детским способом» создания подобного эффекта, является использование CSS3 свойства box-shadow:

В этом случае мы были умнее, использовали специально предназначенное свойство box-shadow. Изменяя параметры x, y, blur на «нуль», мы можем использовать разные цвета для создания множества рамок.

Но есть проблемка, в старых браузерах, которые не понимают свойства box-shadow, будет видна только одна красная рамка в 5px.

«Помните! Дизайн сайта должен выглядеть кроссбраузерно, то есть одинаково во всех браузерах. Включая старые версии.»

Изменяем углы

В дополнение к используемому простому значению border-radius, мы можем указать два отдельных – разделяя их через / мы укажем горизонтальный и вертикальный радиус.


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

CSS формы, с использованием border

Эта техника показывает, как можно создавать css формы, при этом использовать элементы с нулевыми размерами высоты и ширины. Удивлены? Давайте посмотрим на примере…

Для следующих нескольких примеров, мы будем использовать следующую разметку:

…и следующий базовый стиль:

Наиболее частый пример использования CSS форм – создание обтекающей стрелки. Секрет этой стрелки кроется в создании border с разными цветами для каждой из сторон. Потом, ставим атрибуты width и height на 0.

Назначим к div блоку класс arrow:

Что бы продемонстрировать, сначала мы используем расширенный синтаксис. Далее мы можем убрать лишний код, используя сокращенный синтаксис:

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

Отлично получилось! Но это противоречит семантической верстке, создавать .arrow div, только для того, чтобы добавить стрелочку на страницу. Для этой цели, мы можем использовать псевдоэлементы, что мы сейчас и сделаем.

Создаем Speech Bubble

Для создания Speech Bubble («Речевой хмарки»), нам понадобиться небольшой кусочек чистого CSS кода и один div блок.

Далее, добавим базовый стиль:

Далее, мы прилепим стрелочку с помощью after псевдоэлемента.

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

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

Когда мы создаем эту CSS форму, мы не можем конкретно указать размер стрелочки. Вместо этого мы можем установить свойство border-width, которое будет назначать размер для стрелочки. Также мы установим позицию стрелочки внизу посредине. Соответственно для этого используем значения top и left.

Кроме этого, нам остается придать цвет, такой же как у блока. Помните, при позиционировании, нужно учитывать размер других border, которые невидимы (15px). Также придадим блоку закругления по углам.

Не плохо, а? Используя несколько css классов и хитрости border, можно создать такую штуку.

Бонус! Вертикальное центрирование внутри блока

Для одной строки текста, можно использовать line-height. Но если у вас две или больше строк текста… Наилучшим решением будет установить display свойство на table, и поместить весь текст в параграф. Вот как это выглядит на html разметке:

Далее, придадим CSS стили:

Мы не ограничиваемся треугольниками. CSS способен отобразить разные формы – даже сердечки и знак биологической опасности.

Заключение

Теперь, вы знаете гораздо больше нежели использование стандартного синтаксиса border: 1px solid black. Как видите можно создать множество красивых эффектов и форм. Кто бы мог подумать, что с помощью обычного css border, можно создать такие крутые штуки? Если знаете еще крутые штучки, с использованием css свойств border, просьба поделиться со мной в комментариях. На этом все, творческих вам успехов!

border

На этой странице

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

Как и во всех универсальных свойствах, любое персональное значение, которое не указанно, устанавливается в начальное занчение. Обратите внимание, border не может быть использован для указания пользовательского значения border-image , но вместо этого устанавливает его в начальное значение, т.е. none .

Замечание: Рекомендуется использовать border , когда вы хотите установить все свойства границ одновременно. Тогда как универсальные свойства border-width , border-style , и border-color принимают до четырех значений, позволяя установить различные значения для каждого ребра, border принимает единственное значение для каждого свойства. И этот стиль применяется для всех четырех границ.

Синтаксис

Свойство border указывается используя одно или более значений «>
, «>
, и «> указанных ниже.

border

Универсальное свойство border позволяет одновременно установить толщину, стиль и цвет границы вокруг элемента. Значения могут идти в любом порядке, разделяясь пробелом, браузер сам определит, какое из них соответствует нужному свойству. Для установки границы только на определённых сторонах элемента, воспользуйтесь свойствами border-top, border-bottom, border-left, border-right.

Краткая информация

Значение по умолчанию Зависит от использования
Наследуется Нет
Применяется Ко всем элементам
Анимируется Да

Синтаксис ?

Обозначения

Описание Пример
Указывает тип значения.
A && B Значения должны выводиться в указанном порядке. &&
A | B Указывает, что надо выбрать только одно значение из предложенных (A или B). normal | small-caps
A || B Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке. width || count
[ ] Группирует значения. [ crop || cross ]
* Повторять ноль или больше раз. [, ]*
+ Повторять один или больше раз. +
? Указанный тип, слово или группа не является обязательным. inset?
Повторять не менее A, но не более B раз.
# Повторять один или больше раз через запятую. #

×

Значения

Значение border-width определяет толщину границы. Для управления ее видом предоставляется несколько значений border-style . Их названия и результат действия представлен на рис. 1.

Рис.1. Стили рамок

border-color устанавливает цвет границы, значение может быть в любом допустимом для CSS формате.

Пример

В данном примере вокруг блока добавляется двойная граница. Результат показан на рис. 2.

Рис. 2. Применение свойства border

Объектная модель

Примечание

Браузер Internet Explorer до шестой версии включительно при толщине границы 1px отображает dotted как dashed . При толщине 2px и выше значение dotted работает корректно. Эта ошибка исправлена в IE7, но только для всех границ толщиной 1px. Если одна из границ блока имеет толщину 2px и выше, то в IE7 значение dotted превращается в dashed .

Стиль границы в разных браузерах может несколько различаться при использовании значений groove , ridge , inset или outset .

Спецификация ?

Спецификация Статус
CSS Backgrounds and Borders Module Level 3 Возможная рекомендация
CSS Level 2 (Revision 1) Рекомендация
CSS Level 1 Рекомендация

Спецификация

Каждая спецификация проходит несколько стадий одобрения.

  • Recommendation ( Рекомендация ) — спецификация одобрена W3C и рекомендована как стандарт.
  • Cand >Возможная рекомендация ) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
  • Proposed Recommendation ( Предлагаемая рекомендация ) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
  • Working Draft ( Рабочий проект ) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
  • Editor’s draft ( Редакторский черновик ) — черновая версия стандарта после внесения правок редакторами проекта.
  • Draft ( Черновик спецификации ) — первая черновая версия стандарта.

×

Браузеры ?

4 7 12 1 3.5 1 1

Браузеры

В таблице браузеров применяются следующие обозначения.

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

Число указывает версию браузера, начиная с которой свойство поддерживается.


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

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

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

Основы

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

CSS свойства border image

Дата публикации: 2015-12-25

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

Свойства border image

Стандартный способ стилизации рамки это через правило border-style, у которого есть значения dotted, dashed, solid, double, groove, ridge, inset и outset. Выбор значений достаточно большой, но можно еще больше его расширить, добавив фоновые изображения в качестве границы. Сделать это можно с помощью следующих свойств.

Свойство border-image-source

С помощью этого свойство можно установить фоновое изображение в качестве рамки объекта. Значением выступает адрес на картинку:

Как создать сайт самому?

Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

Также это может быть градиент:

В браузере это будет выглядеть примерно так:

Если установить значение none, или если изображение не может быть отображено, браузер применит значения свойства border-style. Так что border-style можно использовать, как фолбэк.

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

Свойство border-image-slice

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

Давайте более подробно разберем принцип работы. Свойство декорирует внутренние отступы сверху, справа, снизу и слева. Ваше изображение с помощью данного свойства дублируется в 9 областях: 4 угла, 4 стороны и середина.

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

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

Целочисленное значение это пиксели изображения или координаты, если изображение векторное. Нельзя добавлять после px после цифр, иначе свойство не будет работать! Ниже пример использования свойства border-image-slice:

Изображение 100 x 100px в качестве рамки будет выглядеть так:

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

Появляется центральная часть изображения:

Изображение отображается, но оно размыто и сплющено:

Свойство border-image-width

Данное свойство отвечает за внутреннюю область под названием border-image-area. По умолчанию границы данной зоны совпадают с border box. Как и свойство border-image-slice, border-image-width работает с отступами, которые делят изображение на 9 зон.

Как создать сайт самому?

Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

Свойство принимает от одного до четырех значений (верх, право, низ, лево), значения указываются в числах или процентах. Проценты высчитываются от размера зоны border-image, т.е. ширина зоны отвечает за горизонтальный отступ, а высота за вертикальный. Если указывать просто цифры без px, это значит, ширина border image будет равна значению, указанному в свойстве умноженному на border-width. К примеру, код ниже:

… ширина изображения-рамки в 3 раза больше значения свойства border-width, т.е. больше 19px в 3 раза. Выглядит это так:

Я заметил, что если задать свойствам border-image-width и border-image-slice одинаковые значения, то изображение-рамка будет отображаться без искажений.

Свойство border-image-outset


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

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

Ниже я нарисовал блок: зеленые точки указывают границу border box. Зона border-image это розовая граница. По умолчанию со значением inset розовая область находится внутри зеленой. Т.е. border image внутри border box.

Если добавить border-image-outset: 19px;, то розовая область вылезет за границу зеленых точек. Ото значит, что border image теперь расположен за границей border box:

Будьте внимательны, так как область border image, лежащая за границей border box не поддается прокрутке и событиям мыши. Все примеры в демо CodePen:

Свойство border-image-repeat

Данное свойство предлагает несколько вариантов масштабирования и расположения изображения на гранях и центральной части рамки. Первое значение работает с горизонтальными гранями (верх и низ), второе – с вертикальными (правая и левая). Если установить одно значение, то оно применится ко всем сторонам. Доступные значения:

stretch – Значение по умолчанию, если не используется свойство border-image-repeat. Изображение растягивается и заполняет всю область.

repeat – Для заполнения области изображение дублируется. Если ширина изображения не вмещается в видимую область поля, то оно обрезается.

round – то же самое, что repeat, но если изображение не вписывается в область, то оно будет масштабироваться пока не впишется. Изображения никогда не обрезаются, но могут быть немного сплющенными.

space – То же самое, что repeat, но если суммарная ширина всех изображений не совпадает с шириной области, то между изображениями появятся пробелы.

На момент написания статьи в Firefox значения space и stretch никак не отличались друг от друга, а в Chrome одинаково работали значения space и repeat.

Сокращенное свойство border-image

Все свойства, описанные выше, можно преобразовать в одно сокращенное:

Р амки элемента в CSS: применение свойства Border

С войство BORDER

Свойство Значения Пр* Нc*
border [ border-width; border-style; border-color ], inherit +
border-width [ thin, medium, thick, ШИРИНА ]<1,4>, inherit +
border-style [ none, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset ]<1,4>, inherit +
border-color [ ЦВЕТ, transparent ]<1,4>, inherit +
border-bottom
border-left
border-right
border-top
[ border-width; border-style; border-color ], inherit +
border-bottom-width
border-left-width
border-right-width
border-top-width
thin, medium , thick, ШИРИНА, inherit +
border-bottom-style
border-left-style
border-right-style
border-top-style
none , hidden, dotted, dashed, solid, double, groove, ridge, inset, outset, inherit +
border-bottom-color
border-left-color
border-right-color
border-top-color
ЦВЕТ , transparent, inherit +

Сокращенная форма задания отдельных свойств для определения ширины, стиля и цвета рамки элементов. При том, что значения этих свойств не являются обязательными, рамка будет отсутствовать, если не задано значение стиля рамки (оно по умолчанию: none).

p < border: 5px groove #00ff00;>— для абзаца задана рамка: шириной 5px, стиль groove, цвета лайм:

Border-width

Свойство задает ширину рамки элемента или отдельно для каждой её стороны, если стиль рамки отличен от none.

Ширину можно указывать в разных единицах, удобнее в px. Одно значение задает ширину всей рамки. Два значения: 1-ое — для верхней и нижней рамок, 2-ое — для левой и правой. Три значения: 1-ое — для верхней, 2-ое — для левой и правой, 3-е — для нижней. Четыре значения установят ширину рамок в следующем порядке: верхняя, правая, нижняя, левая. Это — стандартный порядок в CSS.

thin — узкая.
medium — средняя.
thick — широкая.
inherit — наследование от родительского элемента.

Border-style

Свойство задает стиль рамки элемента или отдельно для каждой её стороны, его значение должно отличаться от none.

none — нет, а ширина равна 0.
hidden — аналогично none, кроме применения к таблицам, где значение свойства Border-collapse равно collapse.
inherit — наследование от родительского элемента.

Допустимо использовать 1-4 значения — порядок применения, как для Border-width. Остальные значения лучше видны на картинке:

Border-color

Свойство задает цвет рамки элемента, либо различные цвета для её четырех сторон. Значение стиля должно отличаться от none и hidden.

• Цвет
transparent — задает прозрачный цвет рамки.
inherit — наследование от родительского элемента.
Можно использовать 1-4 значения — порядок применения, как для Border-width.

Border-[bottom, left, right, top]

Свойства задают ширину, стиль и цвет рамки элементов для определенной стороны.
Значения : как для свойства Border.

Border-[bottom, left, right, top]-width

Свойства задают ширину рамки элемента для определенной стороны.
Значения : как для свойства Border-width.

Border-[bottom, left, right, top]-style

Свойства задают стиль рамки элемента для определенной стороны.
Значения : как для свойства Border-style.

Border-[bottom, left, right, top]-color

Свойства задают цвет рамки элемента для определенной стороны.
Значения : как для свойства Border-color.

Border

Свойство CSS border

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

Свойство border-style

Свойство border-style определяет тип рамки вокруг элемента.

Совет: ни одно свойство границы не будет работать, если не указано свойство border-style!

Значения border-style:

dotted: рамка из точек

dashed: пунктирная рамка

solid: сплошная рамка

double: двойная рамка. Общая ширина двух границ равна значению border-width (ширина рамки)

groove: трехмерная рамка

ridge: трехмерная рамка

inset: трехмерная рамка

outset: трехмерная рамка

Ширина рамки

Свойство border-width задает ширину рамки.

Ширину рамки можно задать в пикселях, либо используя три фиксированных значения: thin (тонкая), medium (средняя) или thick (широкая).

Заметка: свойство border-width не оказывает никакого эффекта на рамку элемента, если не указано свойство border-style.

Пример

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

Цвет рамки (границы)

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

  • названия — название цвета на английском, например, «red»
  • код RGB, например, «rgb(255,0,0)»
  • шестнадцатиричный код, например, «#ff0000»


Кроме того, можно задать цвет границы прозрачным («transparent»).

Заметка: свойство «border-color» не оказывает эффекта на рамку элемента, если не указано свойство «border-style».

Разные цвета границ

С помощью CSS вы можете задать каждой границе (верхней, нижней, правой, левой) свой стиль:

Пример

p
<
border-top-style:dotted;
border-right-style:solid;
border-bottom-style:dotted;
border-left-style:solid;
>

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

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

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

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

  • border-style:dotted;
    • все границы из точек

Указанные значения точно так же применяются к свойствам border-color и border-width.

Совет: чтобы запомнить, как применяются значения свойства, надо запомнить простое правило — значения свойства применяются по часовой стрелке, начиная с верхней границы. Вертикальные границы имеют приоритет перед горизонтальными.

Краткая запись свойств рамки

Как вы видели в примерах, существует много характеристик границ элемента, которые вы можете настроить с помощью CSS.

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

Краткая запись свойств границы называется «border»:

Пример

border:5px solid red;

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

Если вы не указали значение какого-либо свойства, будет подставлено значение по умолчанию (свойство border-style обязательно).

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

Число в столбце «CSS» указывает на то, в какой версии CSS появилось соответствующее свойство (CSS1 или CSS2).

Свойство Описание Значения CSS
border Все свойства границы одной записью border-width
border-style
border-color
1
border-bottom Все свойства нижней границы одной записью border-bottom-width
border-bottom-style
border-bottom-color
1
border-bottom-color Цвет нижней границы border-color 2
border-bottom-style Стиль нижней границы border-style 2
border-bottom-width Ширина нижней границы border-width 1
border-color Цвет всех границ название-цвета
hex-код
rgb- код
transparent
inherit
1
border-left Все свойства левой границы border-left-width
border-left-style
border-left-color
1
border-left-color Цвет левой границы border-color 2
border-left-style Стиль левой границы border-style 2
border-left-width Ширина левой границы border-width 1
border-right Все свойства правой границы border-right-width
border-right-style
border-right-color
1
border-right-color Цвет правой границы border-color 2
border-right-style Стиль правой границы border-style 2
border-right-width Ширина правой границы border-width 1
border-style Стиль всех границ none
hidden
dotted
dashed
solid
double
groove
ridge
inset
outset
inherit
1
border-top Все свойства верхней границы border-top-width
border-top-style
border-top-color
1
border-top-color Цвет верхней границы border-color 2
border-top-style Стиль верхней границы border-style 2
border-top-width Ширина верхней границы border-width 1
border-width Ширина всех границ thin
medium
thick
ширина
inherit
1



Понравилась запись? Сказать «Спасибо» очень просто, поделитесь записью в социальных сетях!

Как сделать бордюр или рамку вокруг элемента HTML, CSS свойство border

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

Свойство CSS border является универсальным, это значит, что оно содержит различные другие свойства с префиксом border. Значения в свойстве border можно указать в любом порядке через пробел.

Какие есть CSS свойства из семейства border? Список приводится ниже:

  • border-bottom — управляет отображением только нижнего бордюра;
  • border-bottom-color – задает цвет нижнего бордюра;
  • border-bottom-left-radius — задает радиус скругления нижнего левого угла бордюра;
  • border-bottom-right-radius — задает радиус скругления нижнего правого угла бордюра;
  • border-bottom-style – задает стиль отображения нижнего бордюра;
  • border-bottom-width – задает ширину нижнего бордюра;
  • border-collapse — задает, как отображать границы вокруг ячеек таблицы, значения: collapse, separate, inherit;
  • border-color – задает цвет бордюра;
  • border-image – позволяет задать рисунок в качестве фона бордюра;
  • border-left — управляет отображением только левого бордюра;
  • border-left-color — задает цвет левого бордюра;
  • border-left-style — задает стиль отображения левого бордюра;
  • border-left-width — задает ширину левого бордюра;
  • border-radius – задает радиус скругления углов бордюра;
  • border-right — управляет отображением только правого бордюра;
  • border-right-color — задает цвет правого бордюра;
  • border-right-style — задает стиль отображения правого бордюра;
  • border-right-width — задает ширину правого бордюра;
  • border-spacing — устанавливает расстояние между границами ячеек в таблице;
  • border-style – задает стиль отображения бордюра, значения: none, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset, inherit;
  • border-top — управляет отображением только верхнего бордюра;
  • border-top-color — задает цвет верхнего бордюра;
  • border-top-left-radius — задает радиус скругления верхнего левого угла бордюра;
  • border-top-right-radius — задает радиус скругления верхнего правого угла бордюра;
  • border-top-style — задает стиль отображения верхнего бордюра;
  • border-top-width — задает ширину верхнего бордюра;
  • border-width – задает ширину бордюра.

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

Свойство CSS border

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

1. Синтаксис CSS border

  • border-width — толщина рамки. Можно задавать в пикселях (px) или воспользоваться стандартными значениями thin, medium, thick (они отличаются только шириной в пикселях)
  • border-style — стиль выводимой рамки. Может принимать следующие значения
    • none или hidden — отменяет границу
    • dotted — рамка из точек
    • dashed — рамка из тире
    • solid — простая линия (применяется чаще всего)
    • double — двойная рамка
    • groove — рифленая 3D граница
    • ridge , inset , outset — различные 3D эффекты рамки
    • inherit — применяется значение родительского элемента
  • border-color — цвет рамки. Можно задавать с помощью конкретного названия цвета или в формате RGB (см. названия html цветов для сайта)

Примечание

Значения в свойстве CSS border можно задавать в любой последовательности. Чаще всего используют последовательность «толщина стиль цвет».

CSS border: radius, color, style и другие css свойства border

Я уверен, вы уже знакомы с css свойством border. Узнаете ли вы что-то новое, чего не знали раньше о css border? Что же, не только узнаете, но и увидите несколько новых вещей, которых вы никогда не знали прежде!

Не только CSS3 можно использовать для закругления уголков, но и чистый CSS код подойдет для создания сложных форм. Раньше вы могли использовать background-image, для создания впечатления закругленных уголков. Благодаря новым техникам использования border, мы можем сделать это на чистом css коде.

Основы использования css border

Наверняка, вы уже ознакомлены со стандартным использованием border свойства:

Код выше, выведет рамку в 1px, которая будет черного цвета. Легко и просто. Также можно немного расширить синтаксис:

Как дополнение, можно использовать специфические значения свойства border-width, три ключевых слова: thin, medium, thick.

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

Более элегантно и проще можно сделать следующим образом:

Как видите, расширенная техника также полезна, когда мы меняем только некоторые свойства: width, style, color и другие.

Border-Radius

Border-radius – это «золотое» свойство CSS3 – первое, наиболее распространенное свойство, которое стало практичным и полезным. Исключая IE8 и версии ниже, все браузеры отображают закругленные уголки с помощью этого.

Хотя, необходимо использовать специальные префиксы для Webkit и Mozilla, чтобы стилизация была корректной.

В сегодняшнее время, мы можем убрать специальные префиксы, и использовать стандартную форму border-radius.

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


В коде выше, устанавливая border-top-right-radius и border-bottom-left-radius на «нуль», можно добиться удивительных форм. Хотя элемент может наследовать некоторые свойства, которые нужно будет обнулить.

Наподобие как margin и padding, мы можем сжать синтаксис:

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

Идем далее основ

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

Сложные структуры css border

Существует множество техник для создания дизайна с применением сложных структур border. Для примера, разберем следующие…

Border-Style

Мы всегда используем наиболее известные свойства solid, dashed и dotted. Но существует парочка иных свойств border-style: groove и ridge.

Или в расширенном синтаксисе:

Хотя эти свойства и полезны, но они не являются основой создания сложных рамок.

Outline

Наиболее популярная техника создания двойной рамки – использование свойства outline.

Этот способ работает отлично, хотя, он нас ограничивает только двумя рамками. Иногда бывает нужно создать градиентный border, который состоит из многих слоев… как тогда?

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

Когда техники outline не достаточно, альтернативным средством является использование псевдо элементов :before и :after. С помощью которых можно добавить дополнительные рамки к элементу:

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

Box-Shadow

Интересным «детским способом» создания подобного эффекта, является использование CSS3 свойства box-shadow:

В этом случае мы были умнее, использовали специально предназначенное свойство box-shadow. Изменяя параметры x, y, blur на «нуль», мы можем использовать разные цвета для создания множества рамок.

Но есть проблемка, в старых браузерах, которые не понимают свойства box-shadow, будет видна только одна красная рамка в 5px.

«Помните! Дизайн сайта должен выглядеть кроссбраузерно, то есть одинаково во всех браузерах. Включая старые версии.»

Изменяем углы

В дополнение к используемому простому значению border-radius, мы можем указать два отдельных – разделяя их через / мы укажем горизонтальный и вертикальный радиус.

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

CSS формы, с использованием border

Эта техника показывает, как можно создавать css формы, при этом использовать элементы с нулевыми размерами высоты и ширины. Удивлены? Давайте посмотрим на примере…

Для следующих нескольких примеров, мы будем использовать следующую разметку:

…и следующий базовый стиль:

Наиболее частый пример использования CSS форм – создание обтекающей стрелки. Секрет этой стрелки кроется в создании border с разными цветами для каждой из сторон. Потом, ставим атрибуты width и height на 0.

Назначим к div блоку класс arrow:

Что бы продемонстрировать, сначала мы используем расширенный синтаксис. Далее мы можем убрать лишний код, используя сокращенный синтаксис:

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

Отлично получилось! Но это противоречит семантической верстке, создавать .arrow div, только для того, чтобы добавить стрелочку на страницу. Для этой цели, мы можем использовать псевдоэлементы, что мы сейчас и сделаем.

Создаем Speech Bubble

Для создания Speech Bubble («Речевой хмарки»), нам понадобиться небольшой кусочек чистого CSS кода и один div блок.

Далее, добавим базовый стиль:

Далее, мы прилепим стрелочку с помощью after псевдоэлемента.

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

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

Когда мы создаем эту CSS форму, мы не можем конкретно указать размер стрелочки. Вместо этого мы можем установить свойство border-width, которое будет назначать размер для стрелочки. Также мы установим позицию стрелочки внизу посредине. Соответственно для этого используем значения top и left.

Кроме этого, нам остается придать цвет, такой же как у блока. Помните, при позиционировании, нужно учитывать размер других border, которые невидимы (15px). Также придадим блоку закругления по углам.

Не плохо, а? Используя несколько css классов и хитрости border, можно создать такую штуку.

Бонус! Вертикальное центрирование внутри блока

Для одной строки текста, можно использовать line-height. Но если у вас две или больше строк текста… Наилучшим решением будет установить display свойство на table, и поместить весь текст в параграф. Вот как это выглядит на html разметке:

Далее, придадим CSS стили:

Мы не ограничиваемся треугольниками. CSS способен отобразить разные формы – даже сердечки и знак биологической опасности.

Заключение

Теперь, вы знаете гораздо больше нежели использование стандартного синтаксиса border: 1px solid black. Как видите можно создать множество красивых эффектов и форм. Кто бы мог подумать, что с помощью обычного css border, можно создать такие крутые штуки? Если знаете еще крутые штучки, с использованием css свойств border, просьба поделиться со мной в комментариях. На этом все, творческих вам успехов!

border

На этой странице

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

Как и во всех универсальных свойствах, любое персональное значение, которое не указанно, устанавливается в начальное занчение. Обратите внимание, border не может быть использован для указания пользовательского значения border-image , но вместо этого устанавливает его в начальное значение, т.е. none .

Замечание: Рекомендуется использовать border , когда вы хотите установить все свойства границ одновременно. Тогда как универсальные свойства border-width , border-style , и border-color принимают до четырех значений, позволяя установить различные значения для каждого ребра, border принимает единственное значение для каждого свойства. И этот стиль применяется для всех четырех границ.

Синтаксис

Свойство border указывается используя одно или более значений «>
, «>
, и «> указанных ниже.

border

Универсальное свойство border позволяет одновременно установить толщину, стиль и цвет границы вокруг элемента. Значения могут идти в любом порядке, разделяясь пробелом, браузер сам определит, какое из них соответствует нужному свойству. Для установки границы только на определённых сторонах элемента, воспользуйтесь свойствами border-top, border-bottom, border-left, border-right.

Краткая информация

Значение по умолчанию Зависит от использования
Наследуется Нет
Применяется Ко всем элементам
Анимируется Да

Синтаксис ?

Обозначения

Описание Пример
Указывает тип значения.
A && B Значения должны выводиться в указанном порядке. &&
A | B Указывает, что надо выбрать только одно значение из предложенных (A или B). normal | small-caps
A || B Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке. width || count
[ ] Группирует значения. [ crop || cross ]
* Повторять ноль или больше раз. [, ]*
+ Повторять один или больше раз. +
? Указанный тип, слово или группа не является обязательным. inset?
Повторять не менее A, но не более B раз.
# Повторять один или больше раз через запятую. #

×


Значения

Значение border-width определяет толщину границы. Для управления ее видом предоставляется несколько значений border-style . Их названия и результат действия представлен на рис. 1.

Рис.1. Стили рамок

border-color устанавливает цвет границы, значение может быть в любом допустимом для CSS формате.

Пример

В данном примере вокруг блока добавляется двойная граница. Результат показан на рис. 2.

Рис. 2. Применение свойства border

Объектная модель

Примечание

Браузер Internet Explorer до шестой версии включительно при толщине границы 1px отображает dotted как dashed . При толщине 2px и выше значение dotted работает корректно. Эта ошибка исправлена в IE7, но только для всех границ толщиной 1px. Если одна из границ блока имеет толщину 2px и выше, то в IE7 значение dotted превращается в dashed .

Стиль границы в разных браузерах может несколько различаться при использовании значений groove , ridge , inset или outset .

Спецификация ?

Спецификация Статус
CSS Backgrounds and Borders Module Level 3 Возможная рекомендация
CSS Level 2 (Revision 1) Рекомендация
CSS Level 1 Рекомендация

Спецификация

Каждая спецификация проходит несколько стадий одобрения.

  • Recommendation ( Рекомендация ) — спецификация одобрена W3C и рекомендована как стандарт.
  • Cand >Возможная рекомендация ) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
  • Proposed Recommendation ( Предлагаемая рекомендация ) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
  • Working Draft ( Рабочий проект ) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
  • Editor’s draft ( Редакторский черновик ) — черновая версия стандарта после внесения правок редакторами проекта.
  • Draft ( Черновик спецификации ) — первая черновая версия стандарта.

×

Браузеры ?

4 7 12 1 3.5 1 1

Браузеры

В таблице браузеров применяются следующие обозначения.

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

Число указывает версию браузера, начиная с которой свойство поддерживается.

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

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

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

Основы

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

CSS свойства border image

Дата публикации: 2015-12-25

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

Свойства border image

Стандартный способ стилизации рамки это через правило border-style, у которого есть значения dotted, dashed, solid, double, groove, ridge, inset и outset. Выбор значений достаточно большой, но можно еще больше его расширить, добавив фоновые изображения в качестве границы. Сделать это можно с помощью следующих свойств.

Свойство border-image-source

С помощью этого свойство можно установить фоновое изображение в качестве рамки объекта. Значением выступает адрес на картинку:


Как создать сайт самому?

Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

Также это может быть градиент:

В браузере это будет выглядеть примерно так:

Если установить значение none, или если изображение не может быть отображено, браузер применит значения свойства border-style. Так что border-style можно использовать, как фолбэк.

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

Свойство border-image-slice

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

Давайте более подробно разберем принцип работы. Свойство декорирует внутренние отступы сверху, справа, снизу и слева. Ваше изображение с помощью данного свойства дублируется в 9 областях: 4 угла, 4 стороны и середина.

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

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

Целочисленное значение это пиксели изображения или координаты, если изображение векторное. Нельзя добавлять после px после цифр, иначе свойство не будет работать! Ниже пример использования свойства border-image-slice:

Изображение 100 x 100px в качестве рамки будет выглядеть так:

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

Появляется центральная часть изображения:

Изображение отображается, но оно размыто и сплющено:

Свойство border-image-width

Данное свойство отвечает за внутреннюю область под названием border-image-area. По умолчанию границы данной зоны совпадают с border box. Как и свойство border-image-slice, border-image-width работает с отступами, которые делят изображение на 9 зон.

Как создать сайт самому?

Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

Свойство принимает от одного до четырех значений (верх, право, низ, лево), значения указываются в числах или процентах. Проценты высчитываются от размера зоны border-image, т.е. ширина зоны отвечает за горизонтальный отступ, а высота за вертикальный. Если указывать просто цифры без px, это значит, ширина border image будет равна значению, указанному в свойстве умноженному на border-width. К примеру, код ниже:

… ширина изображения-рамки в 3 раза больше значения свойства border-width, т.е. больше 19px в 3 раза. Выглядит это так:

Я заметил, что если задать свойствам border-image-width и border-image-slice одинаковые значения, то изображение-рамка будет отображаться без искажений.

Свойство border-image-outset

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

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

Ниже я нарисовал блок: зеленые точки указывают границу border box. Зона border-image это розовая граница. По умолчанию со значением inset розовая область находится внутри зеленой. Т.е. border image внутри border box.

Если добавить border-image-outset: 19px;, то розовая область вылезет за границу зеленых точек. Ото значит, что border image теперь расположен за границей border box:

Будьте внимательны, так как область border image, лежащая за границей border box не поддается прокрутке и событиям мыши. Все примеры в демо CodePen:

Свойство border-image-repeat

Данное свойство предлагает несколько вариантов масштабирования и расположения изображения на гранях и центральной части рамки. Первое значение работает с горизонтальными гранями (верх и низ), второе – с вертикальными (правая и левая). Если установить одно значение, то оно применится ко всем сторонам. Доступные значения:

stretch – Значение по умолчанию, если не используется свойство border-image-repeat. Изображение растягивается и заполняет всю область.

repeat – Для заполнения области изображение дублируется. Если ширина изображения не вмещается в видимую область поля, то оно обрезается.

round – то же самое, что repeat, но если изображение не вписывается в область, то оно будет масштабироваться пока не впишется. Изображения никогда не обрезаются, но могут быть немного сплющенными.

space – То же самое, что repeat, но если суммарная ширина всех изображений не совпадает с шириной области, то между изображениями появятся пробелы.

На момент написания статьи в Firefox значения space и stretch никак не отличались друг от друга, а в Chrome одинаково работали значения space и repeat.

Сокращенное свойство border-image

Все свойства, описанные выше, можно преобразовать в одно сокращенное:

Р амки элемента в CSS: применение свойства Border

С войство BORDER

Свойство Значения Пр* Нc*
border [ border-width; border-style; border-color ], inherit +
border-width [ thin, medium, thick, ШИРИНА ]<1,4>, inherit +
border-style [ none, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset ]<1,4>, inherit +
border-color [ ЦВЕТ, transparent ]<1,4>, inherit +
border-bottom
border-left
border-right
border-top
[ border-width; border-style; border-color ], inherit +
border-bottom-width
border-left-width
border-right-width
border-top-width
thin, medium , thick, ШИРИНА, inherit +
border-bottom-style
border-left-style
border-right-style
border-top-style
none , hidden, dotted, dashed, solid, double, groove, ridge, inset, outset, inherit +
border-bottom-color
border-left-color
border-right-color
border-top-color
ЦВЕТ , transparent, inherit +

Сокращенная форма задания отдельных свойств для определения ширины, стиля и цвета рамки элементов. При том, что значения этих свойств не являются обязательными, рамка будет отсутствовать, если не задано значение стиля рамки (оно по умолчанию: none).

p < border: 5px groove #00ff00;>— для абзаца задана рамка: шириной 5px, стиль groove, цвета лайм:

Border-width

Свойство задает ширину рамки элемента или отдельно для каждой её стороны, если стиль рамки отличен от none.

Ширину можно указывать в разных единицах, удобнее в px. Одно значение задает ширину всей рамки. Два значения: 1-ое — для верхней и нижней рамок, 2-ое — для левой и правой. Три значения: 1-ое — для верхней, 2-ое — для левой и правой, 3-е — для нижней. Четыре значения установят ширину рамок в следующем порядке: верхняя, правая, нижняя, левая. Это — стандартный порядок в CSS.

thin — узкая.
medium — средняя.
thick — широкая.
inherit — наследование от родительского элемента.

Border-style

Свойство задает стиль рамки элемента или отдельно для каждой её стороны, его значение должно отличаться от none.

none — нет, а ширина равна 0.
hidden — аналогично none, кроме применения к таблицам, где значение свойства Border-collapse равно collapse.
inherit — наследование от родительского элемента.

Допустимо использовать 1-4 значения — порядок применения, как для Border-width. Остальные значения лучше видны на картинке:

Border-color

Свойство задает цвет рамки элемента, либо различные цвета для её четырех сторон. Значение стиля должно отличаться от none и hidden.

• Цвет
transparent — задает прозрачный цвет рамки.
inherit — наследование от родительского элемента.
Можно использовать 1-4 значения — порядок применения, как для Border-width.

Border-[bottom, left, right, top]

Свойства задают ширину, стиль и цвет рамки элементов для определенной стороны.
Значения : как для свойства Border.

Border-[bottom, left, right, top]-width

Свойства задают ширину рамки элемента для определенной стороны.
Значения : как для свойства Border-width.

Border-[bottom, left, right, top]-style

Свойства задают стиль рамки элемента для определенной стороны.
Значения : как для свойства Border-style.

Border-[bottom, left, right, top]-color

Свойства задают цвет рамки элемента для определенной стороны.
Значения : как для свойства Border-color.

Border


Свойство CSS border

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

Свойство border-style

Свойство border-style определяет тип рамки вокруг элемента.

Совет: ни одно свойство границы не будет работать, если не указано свойство border-style!

Значения border-style:

dotted: рамка из точек

dashed: пунктирная рамка

solid: сплошная рамка

double: двойная рамка. Общая ширина двух границ равна значению border-width (ширина рамки)

groove: трехмерная рамка

ridge: трехмерная рамка

inset: трехмерная рамка

outset: трехмерная рамка

Ширина рамки

Свойство border-width задает ширину рамки.

Ширину рамки можно задать в пикселях, либо используя три фиксированных значения: thin (тонкая), medium (средняя) или thick (широкая).

Заметка: свойство border-width не оказывает никакого эффекта на рамку элемента, если не указано свойство border-style.

Пример

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

Цвет рамки (границы)

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

  • названия — название цвета на английском, например, «red»
  • код RGB, например, «rgb(255,0,0)»
  • шестнадцатиричный код, например, «#ff0000»

Кроме того, можно задать цвет границы прозрачным («transparent»).

Заметка: свойство «border-color» не оказывает эффекта на рамку элемента, если не указано свойство «border-style».

Разные цвета границ

С помощью CSS вы можете задать каждой границе (верхней, нижней, правой, левой) свой стиль:

Пример

p
<
border-top-style:dotted;
border-right-style:solid;
border-bottom-style:dotted;
border-left-style:solid;
>

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

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

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

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

  • border-style:dotted;
    • все границы из точек

Указанные значения точно так же применяются к свойствам border-color и border-width.

Совет: чтобы запомнить, как применяются значения свойства, надо запомнить простое правило — значения свойства применяются по часовой стрелке, начиная с верхней границы. Вертикальные границы имеют приоритет перед горизонтальными.

Краткая запись свойств рамки

Как вы видели в примерах, существует много характеристик границ элемента, которые вы можете настроить с помощью CSS.

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

Краткая запись свойств границы называется «border»:

Пример

border:5px solid red;

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

Если вы не указали значение какого-либо свойства, будет подставлено значение по умолчанию (свойство border-style обязательно).

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

Число в столбце «CSS» указывает на то, в какой версии CSS появилось соответствующее свойство (CSS1 или CSS2).

Свойство Описание Значения CSS
border Все свойства границы одной записью border-width
border-style
border-color
1
border-bottom Все свойства нижней границы одной записью border-bottom-width
border-bottom-style
border-bottom-color
1
border-bottom-color Цвет нижней границы border-color 2
border-bottom-style Стиль нижней границы border-style 2
border-bottom-width Ширина нижней границы border-width 1
border-color Цвет всех границ название-цвета
hex-код
rgb- код
transparent
inherit
1
border-left Все свойства левой границы border-left-width
border-left-style
border-left-color
1
border-left-color Цвет левой границы border-color 2
border-left-style Стиль левой границы border-style 2
border-left-width Ширина левой границы border-width 1
border-right Все свойства правой границы border-right-width
border-right-style
border-right-color
1
border-right-color Цвет правой границы border-color 2
border-right-style Стиль правой границы border-style 2
border-right-width Ширина правой границы border-width 1
border-style Стиль всех границ none
hidden
dotted
dashed
solid
double
groove
ridge
inset
outset
inherit
1
border-top Все свойства верхней границы border-top-width
border-top-style
border-top-color
1
border-top-color Цвет верхней границы border-color 2
border-top-style Стиль верхней границы border-style 2
border-top-width Ширина верхней границы border-width 1
border-width Ширина всех границ thin
medium
thick
ширина
inherit
1



Понравилась запись? Сказать «Спасибо» очень просто, поделитесь записью в социальных сетях!

свойство border-style

Свойство border-style определяет стиль границы блока. С помощью этого свойства можно установить стиль для всех границ элемента (border-top-style, border-right-style, border-bottom-style, border-left-style). Стиль рамки, по умолчанию, не наследуется и считается невидимым. Стиль может принимать любое значение в соответствии со стандартом CSS 2.1 или CSS 3, либо значением inherit. В зависимости от количества заданых значений (от 1 до 4), устанавливаются цвета для разных сторон рамки:

  • Если указано единственное значение, то данная величина устанавливает стиль для всех сторон (border-top-style, border-right-style, border-bottom-style, border-left-style)
  • Если указано два значения, то первая величина устанавливает стиль для верхней и нижней стороны (border-top-style, border-bottom-style), а вторая — для левой и правой стороны (border-left-style, border-right-style)
  • Три значения, устанавливают, соответственно, стиль рамки для верхней (border-top-style), правой и левой (border-left-style, border-right-style), а также нижней (border-bottom-style) сторон.
  • Четыре значения последовательно применяются для всех сторон начиная с верхней по часовой стрелке — верхняя, правая, нижняя, левая границы.

Доступные стили:

Для стилей groove, ridge, inset, outset в спецификации не утвержден метод расчета цвета, поэтому в разных браузера, рамки с такими стилями могут немного визуально отличаться (см. примеры). Так же в спецификации не обсуждается размер точек, штрихов и промежутков между ними для стилей dotted и dashed, рекомендуется только выбирать такие размеры, чтобы углы рамки смотрелись симметрично, кроме этого в браузерах на движках Trident (Internet Explorer) и Gecko (Firefox) стиль dotted отображается кружками, а в браузерах на движках WebKit (Chrome,Safari) и Presto (Opera) квадратиками.

Специфические стили:

Данные стили доступны только в определенных версиях браузеров и не являются часть стандарта CSS.

Мастер Йода рекомендует:  Знакомство с созданием изображений на чистом CSS. Часть первая. Для начинающих
Добавить комментарий