CSS: border. Границы элемента. CSS border: radius, color, style и другие css свойства border

Для управления границей элемента применяется универсальное свойство border . Это свойство позволяет установить в одном объявлении толщину, стиль и цвет границы элемента.

Эти три свойства (толщину, стиль и цвет границы) можно установить в одном объявлении. Вот пример:

Границы в CSS

Блок div с рамкой 3px красного цвета.

Можно указать стиль границы только на одной стороны элемента. Для этого применяют свойства border-top (верхняя граница), border-right (правая граница), border-bottom (нижняя граница), border-left (левая граница).

Границы в CSS

Блок div с разными границами.

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

Подумайте, как при помощи CSS можно создать такую фигуру:

Значения границы - толщину, стиль и цвет - можно задать отдельно используя специальные свойства.

  • border-style - стиль границы.
  • border-width - ширина границы.
  • border-color - цвет границы.

Рассмотрим каждое из значений по отдельности.

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

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

  1. none - граница отсутствует (по умолчанию).
  2. solid - сплошная граница.
  3. double - двойная граница.
  4. dashed - пунктирная граница.
  5. dotted - граница из ряда точек.
  6. ridge - граница "гребень".
  7. groove - граница "бороздка".
  8. inset - вдавленная граница.
  9. outset - выдавленная граница.

Примеры того, как они выглядят.

граница отсутствует (none)


сплошная граница (solid)


двойная граница (double)


граница из ряда точек (dotted)


пунктирная граница (dashed)


граница "бороздка" (groove)


граница "гребень" (ridge)


вдавленная граница (inset)


выдавленная граница (outset)

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

Блок div с рамкой чёрного цвета и стиля ridge.

Рамка выглядит как solid , но это потому что стиль ridge создаётся добавлением чёрного эффекта тени, а чёрный эффект на чёрной рамке не виден.

При помощи свойства border-style стиль границы может быть задан не только для всех сторон блока. Есть возможность задавать несколько значений одному свойству border-style , в зависимости от числа значений стиль границы будет присвоен разному числу сторон блока. Можно задать одно, два, три и четыре значения. Давайте рассмотрим примеры для каждого случая.

Одно значение (solid) - стиль границы установлен для всех сторон блока.


Два значения (solid double) - первое значение установило стиль для верхней и нижней сторон, второе для боковой.


Три значения (solid double dotted) - первое значение для верхней стороны, второе для боковых, стретье для нижней.


Четыре значения (solid double dotted dashed) - каждое значение для одной стороны по часовой стрелке начиная с верхней.

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

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

Как и для свойства border-style , для свойства также можно задавать от одного до четырёх значений. Рассмотрим примеры для каждого случая.



Код примера:

Толщина границы в CSS

Одно значение (2px) - толщина границы установлен для всех сторон блока.

Два значения (1px 5px) - первое значение установило толщину для верхней и нижней сторон, второе для боковой.

Три значения (1px 3px 5px) - первое значение для верхней стороны, второе для боковых, стретье для нижней.

Четыре значения (1px 3px 5px 7px) - каждое значение для одной стороны по часовой стрелке начиная с верхней.

Также для свойства border-width существуют значения в виде ключевых слов. Всего их три:

  • thin - тонкая граница;
  • medium - средняя толщина;
  • thick - толстая граница;

Толщина границы: thin.


Толщина границы: medium.


Толщина границы: thick.

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

Для управления цветом границы используется средство border-color . Цвета для этого свойства можно задать используя любой способ, описанный в статье "Цвета в CSS ", а именно:

  • Шестнадцатеричная запись (#ff00aa ) цвета.
  • Формат RGB - rgb(255,12,110) . Формат RGBA для CSS3.
  • Форматы HSL и HSLA для CSS3.
  • Название цвета, например black (чёрный). Полный список названий цветов приведён в таблице названий цветов CSS .

Свойство border-color также может иметь от одного до четырёх значений и обрабатывает их аналогично предыдущим свойствам.

Одно значение (red).


Два значения (red black).


Три значения (red black yellow).


Четыре значения (red black yellow blue).

Теперь вернёмся к задаче, озвученной выше, и нарисуем фигуру:

Вот код, который рисует такую фигуру, только побольше размером:

Толщина границы в CSS

Установка значений для сторон отдельно

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

  • border-top (верхняя граница)
  • border-right (правая граница)
  • border-bottom (нижняя граница)
  • border-left (левая граница)

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

Параметры верхней границы (border-top ).

  • border-top-color - задаёт цвет верхней границы элемента.
  • border-top-width - задаёт толщину верхней границы элемента.
  • border-top-style - задаёт стиль верхней границы элемента.

Параметры правой границы (border-right ).

  • border-right-color - задаёт цвет правой границы элемента.
  • border-right-width - задаёт толщину правой границы элемента.
  • border-right-style - задаёт стиль правой границы элемента.

Параметры нижней границы (border-bottom ).

  • border-bottom-color - задаёт цвет нижней границы элемента.
  • border-bottom-width - задаёт толщину нижней границы элемента.
  • border-bottom-style - задаёт стиль нижней границы элемента.

Параметры левой границы (border-left ).

  • border-left-color - задаёт цвет левой границы элемента.
  • border-left-width - задаёт толщину левой границы элемента.
  • border-left-style - задаёт стиль левой границы элемента.

Пример использования этих свойств:

Толщина границы в CSS

В этом примере блоку div сначала заданы границы толщиной 3px и стилем solid для всех сторон. Затем:
  • переопределён цвет верхней границы при помощи свойства border-top-color в красный,
  • при помощи свойства border-right-width установлена толщина правой границы 10px,
  • при помощи свойства border-bottom-style стиль нижней границы переопределён как double,
  • при помощи свойства border-left-color левой границе установлен синий цвет.

Свойство border-radius. Округление углов границы.

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

Значениями могут быть любые числа, используемые в CSS.

Свойство border-radius: 15px.

Если рамка блока не задана, то скругление происходит с фоном. Вот пример закругления блока без рамки, но с фоновым цветом:

Свойство border-radius: 15px.

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

Border-top-left-radius: 15px; border-top-right-radius: 0; border-bottom-right-radius: 15px; border-bottom-left-radius: 0;

Свойство border-radius: 15px.

Хотя этот код можно записать одним объявлением: border-radius : 15px 0 15px 0 . Дело в том, что для свойства border-radius можно задавать от одного до четырёх значений. В таблице ниже приведены правила, которые определяют такие объявления.

Внимательно изучив эту таблицу можно понять, что самая короткая запись нужного стиля будет такой: border-radius : 15px 0 . Всего два значения.

Немного практики

Рисуем лимон средствами CSS.

Вот код такого блока:

Margin: 0 auto; /* Размещаем блок по центру */ width: 200px; height: 200px; background: #F5F240; border: 1px solid #F0D900; border-radius: 10px 150px 30px 150px;

Мы уже рисовали фигуру:

Теперь оставим от неё треугольник:

Код треугольника такой:

Margin: 0 auto; /* Размещаем блок по центру */ padding: 0px; width: 0px; height: 0; border: 30px solid white; border-bottom-color: red;

Июнь 16, 2016

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

Зачем нужна прозрачная рамка?

При верстке очередного из макетов стояла такая задача: при наведении на пункт меню у него должно появиться подчеркивание. Причем не у текста, а у всего блока со ссылкой. Для тех кто разбирается в верстке, все достаточно просто и понятно в данном случае. Нужно просто при наведении на ссылку добавлять ей свойство border-bottom . Но если просто сделать так, то будет не очеь красиво и здорово. Сейчас я вам покажу пример. Вот такой html код нужен для создания простого меню на 4 пункта:

В общем, ему были прописаны некоторые стили, но все их я приводить не буду. Интересует нас именно эффект подчеркивания при наведении на пункт. Реализуется он так:

Menu li a:hover{ border-bottom: 5px solid brown; }

Все достаточно просто, но получается вот что (наведите на любой пункт):

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

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

Menu li a{ border-bottom: 5px solid transparent; }

Я привел только одно свойство, остальные стили нас не интересуют, вы можете их сами прописывать. Теперь при наведении никакого дергания происходить не будет, можете удостовериться в этом:

Отлично, надеюсь я ответил на вопрос, для чего нужна в css прозрачная рамка. Возможно, у нее есть еще какое-то применение. Вернее, не возможно, а точно. С ее помощью можно создавать треугольники. Как, смотрите . Так что вот такие есть варианты применения прозрачной рамки.

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

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

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

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

Border: 1px solid black;

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

Border-width: thick; border-style: solid; border-color: black;

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

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

Box { border: 1px solid red; } .box:hover { border: 1px solid green; }

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

Box { border: 1px solid red; } .box:hover { border-color: green; }

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

Border-Radius

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

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

Webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px;

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

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

Border-top-left-radius: 20px; border-top-right-radius: 0; border-bottom-right-radius: 30px; border-bottom-left-radius: 0;

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

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

/* top left, top right, bottom right, bottom left */ border-radius: 20px 0 30px 0;

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

Lemon { width: 200px; height: 200px; background: #F5F240; border: 1px solid #F0D900; border-radius: 10px 150px 30px 150px; }

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

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

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

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

Border-Style

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

Border: 20px groove #e3e3e3;

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

Border-color: #e3e3e3; border-width: 20px; border-style: groove;

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

Outline

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

Box { border: 5px solid #292929; outline: 5px solid #e3e3e3; }

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

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

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

Box { width: 200px; height: 200px; background: #e3e3e3; position: relative; border: 10px solid green; } /* Create two boxes with the same width of the container */ .box:after, .box:before { content: ""; position: absolute; top: 0; left: 0; bottom: 0; right: 0; } .box:after { border: 5px solid red; outline: 5px solid yellow; } .box:before { border: 10px solid blue; }

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

Box-Shadow

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

Box { border: 5px solid red; box-shadow: 0 0 0 5px green, 0 0 0 10px yellow, 0 0 0 15px orange; }

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

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

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

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

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

Для примера:

Border-radius: 50px / 100px; /* horizontal radius, vertical radius */

… это равносильно:

Border-top-left-radius: 50px 100px; border-top-right-radius: 50px 100px; border-bottom-right-radius: 50px 100px; border-bottom-left-radius: 50px 100px;

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

Box { width: 200px; height: 200px; background: #666; border-top-left-radius: 15em 1em; border-bottom-right-radius: 15em 1em; }

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

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

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

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

Box { width: 200px; height: 200px; background: black; }

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

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

Arrow { width: 0; height: 0; border-top: 100px solid red; border-right: 100px solid green; border-bottom: 100px solid blue; border-left: 100px solid yellow; }

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

Arrow { width: 0; height: 0; border: 100px solid; border-color: red green blue yellow; }

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

Arrow { width: 0; height: 0; border: 100px solid; border-bottom-color: blue; }

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

Создаем Speech Bubble

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

Hi there!

Speech-bubble { position: relative; background-color: #292929; width: 200px; height: 150px; line-height: 150px; /* vertically center */ color: white; text-align: center; }

Speech-bubble:after { content: ""; }

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

Speech-bubble:after { content: ""; position: absolute; width: 0; height: 0; border: 10px solid; border-color: red green blue yellow; }

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

Speech-bubble:after { content: ""; position: absolute; width: 0; height: 0; border: 10px solid; border-top-color: red; }

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

Speech-bubble:after { content: ""; position: absolute; width: 0; height: 0; border: 15px solid; border-top-color: red; top: 100%; left: 50%; }

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

Speech-bubble { /* … other styles */ border-radius: 10px; } .speech-bubble:after { content: ""; position: absolute; width: 0; height: 0; border: 15px solid; border-top-color: #292929; top: 100%; left: 50%; margin-left: -15px; /* adjust for border width */ }

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

/* Speech Bubbles Usage: примените класс.speech-bubble и.speech-bubble-НАПРАВЛЕНИЕ, как показано ниже

Hi there
*/ .speech-bubble { position: relative; background-color: #292929; width: 200px; height: 150px; line-height: 150px; /* vertically center */ color: white; text-align: center; border-radius: 10px; font-family: sans-serif; } .speech-bubble:after { content: ""; position: absolute; width: 0; height: 0; border: 15px solid; } /* Position the Arrow */ .speech-bubble-top:after { border-bottom-color: #292929; left: 50%; bottom: 100%; margin-left: -15px; } .speech-bubble-right:after { border-left-color: #292929; left: 100%; top: 50%; margin-top: -15px; } .speech-bubble-bottom:after { border-top-color: #292929; top: 100%; left: 50%; margin-left: -15px; } .speech-bubble-left:after { border-right-color: #292929; top: 50%; right: 100%; margin-top: -15px; }

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

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

Speech-bubble { /* other styles */ display: table; } .speech-bubble p { display: table-cell; vertical-align: middle; }

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

Biohazard { width: 0; height: 0; border: 60px solid; border-radius: 50%; border-top-color: black; border-bottom-color: black; border-left-color: yellow; border-right-color: yellow; }

Заключение


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

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

border : border-width border-style border-color | inherit ;
Примечание

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

2. Примеры с различными границами рамок CSS border

2.1. Пример. Разные стили оформления границы рамки border-style

border-style: dashed
border-style: dashed
border-style: solid
border-style: double
border-style: groove
border-style: ridge
border-style: inset
border-style: outset
Четыре разных рамки

border-style: dotted

border-style: dashed

border-style: solid

border-style: double

border-style: groove

border-style: ridge

border-style: inset

border-style: outset

Четыре разных рамки

2.2. Пример. Изменения цвета рамки при наведении курсора мыши

Этот пример очень простой, но интересный. Он показывает, как можно использовать псевдокласс :hover и рамку CSS border для создания простых эффектов (например, для меню).

При наведении курсора мыши на блок цвет рамки изменится

Вот как это выглядит на странице:

2.3. Пример. Как сделать прозрачную рамку border

Рамку можно сделать прозрачной. Этот эффект редко, но иногда может быть очень полезен для веб-дизайнеров. Для задания прозрачности надо воспользоваться заданием цвета в виде RGBA (R, G, B, P) , где последним параметром задается прозрачность (вещественное число от 0.0 до 1.0)

Вот как это выглядит на странице:

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

Задает толщину линии. Ранее мы задавали ее в едином описании border.

Синтаксис CSS border-width

border-width : thin | medium | thick | значение ;
  • thin - тонкая толщина линии
  • medium - средняя толщина линии
  • thick - толстая толщина линии

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

border-width: thin
border-width: medium
border-width: thick
Разная толщина у границ

Вот как это выглядит на странице:

border-width: thin


border-width: medium


border-width: thick


Разная толщина у границ

4. Как сделать рамку border только с одного края (границы)

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

  • border-top - для задания рамки сверху (верхняя граница)
  • border-bottom - для задания рамки снизу (нижняя граница)
  • border-right - для задания рамки справа (правая граница)
  • border-left - для задания рамки слева (левая граница)

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

Также есть свойства

  • border-top-color - задание цвета верхний границы
  • border-top-style - задание стиля верхней границы
  • border-top-width - задание толщины верхней границы
  • и т.д. для каждого направления

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

/* Описание двух одинаковых стилей: */

4.1. Пример. Красивая рамка для выделения цитат

Пример рамки для цитаты

Вот как это выглядит на странице:

Пример рамки для цитаты

Примечание
Можно задать отдельную границу для каждой из сторон.

5. Как сделать несколько границ border у элемента html

Иногда требуется сделать несколько границ. Приведем пример

5.1. Первый вариант с несколькими границами

Вот как это выглядит на странице:

Есть второй способ через наложение теней.

5.2. Наложение теней для создания нескольких границ

Вот как это выглядит на странице:

6. Скругление углов у границ (border-radius)

Для создания красивых рамок используют свойство CSS border-radius (доступно только в CSS3). С помощью него можно делать скругления углов, что создает совсем другой вид. Например

7. Вдавленная линия CSS

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


Вот как это выглядит на странице:

Для обращения к border из JavaScript нужно писать следующую конструкцию:

document.getElementById("elementID").style.border ="VALUE "