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

Границы

-moz-border-bottom-colors

Устанавливает набор цветов для нижней границы элемента в Firefox.

-moz-border-left-colors

Устанавливает набор цветов для левой границы элемента в Firefox.

-moz-border-right-colors

Устанавливает набор цветов для правой границы элемента в Firefox.

-moz-border-top-colors

Устанавливает набор цветов для верхней границы элемента в Firefox.

border

Позволяет одновременно установить толщину, стиль и цвет границы вокруг элемента.

border-bottom

Позволяет одновременно установить толщину, стиль и цвет границы внизу элемента.

border-bottom-color

Устанавливает цвет границы внизу элемента.

border-bottom-style

Устанавливает стиль границы внизу элемента.

border-bottom-width

Устанавливает толщину границы внизу элемента.

border-color

Устанавливает цвет границы на разных сторонах элемента.

border-image

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

border-left

Позволяет одновременно установить толщину, стиль и цвет левой границы элемента.

border-left-color

Задает цвет границы слева от элемента.

border-left-style

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

border-left-width

Устанавливает толщину границы слева от элемента.

border-right

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

border-right-color

Задает цвет границы справа от элемента.

border-right-style

Устанавливает стиль границы справа от элемента.

border-right-width

Устанавливает толщину границы справа от элемента.

border-style

Устанавливает стиль границы вокруг элемента.

border-top

Позволяет одновременно установить толщину, стиль и цвет границы сверху элемента.

border-top-color

Задает цвет границы сверху элемента.

border-top-style

Устанавливает стиль границы сверху элемента.

border-top-width

Устанавливает толщину границы сверху элемента.

border-width

Задает толщину границы одновременно на всех сторонах элемента или индивидуально для каждой стороны.

outline

Универсальное свойство, одновременно устанавливающее цвет, стиль и толщину внешней границы на всех четырех сторонах элемента.

outline-color

Задает цвет внешней границы элемента.

outline-offset

Устанавливает расстояние между рамкой, созданной с помощью свойства outline, и краем или границей элемента добавленной через border.

Источник

CSS: border. Границы элемента.

Свойство border: краткая информация

Значение по умолчанию	Зависит от элемента
Применяется	К любым элементам
Наследуется	Нет
Ссылка на спецификацию	http://www.w3.org/TR/CSS21/box.html#propdef-border

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Табл. Свойство border-radius

Число значений	Результат
1	Радиус указывается для всех углов блока.
2	Первое значение задает радиус верхнего левого и нижнего правого угла, второе значение — верхнего правого и нижнего левого угла.
3	Первое значение задает радиус для верхнего левого угла, второе — устанавливает радиус верхнего правого и нижнего левого углов одновременно, а третье — для нижнего правого уголка.
4	По очереди устанавливает радиус для верхнего левого, верхнего правого, нижнего правого и нижнего левого углов.

Источник

CSS Урок 12 Границы Элементов

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

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

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

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

Никакое из свойств границы не возымеет КАКОЙ-ЛИБО эффект до тех пор, пока свойство border-style не установлено!

Значения border-style

none: Отсутствие границы

dotted: Граница из точек

dashed: Пунктирная граница

solid: Сплошная граница

double: Двойная граница. Ширина двойной границы равна значению border-width

groove: Определяет 3D рельефную границу. Эффект зависит от значения border-color

ridge: Определяет 3D хребтообразную границу. Эффект зависит от значения border-color

inset: Определяет 3D вдавленную границу. Эффект зависит от значения border-color

outset: Определяет 3D выпуклую границу. Эффект зависит от значения border-color

Ширина Границы

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

Ширина устанавливается в пикселях, или с помощью одного из трех предопределенных значений: thin (тонкая), medium (средняя), or thick (толстая).

Замечание: Свойство «border-width» не работает, если используется в одиночку. Используйте сначала свойство «border-style», чтобы установить границы.

Пример

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

Попробуйте сами »
Щелкните на кнопке «Попробуйте сами» чтобы увидеть как это работает

Цвет Границы

Свойство border-color используется, чтобы установить цвет границы. Цвет может быть установлен с помощью:

Также вы можете установить цвет границы в «transparent».

Замечание: Свойство «border-color» не работает, если используется в одиночку. Укажите сначала свойство «border-style», чтобы установить границы.

Пример

p.one < border-style:solid; border-color:red; > p.two < border-style:solid; border-color:#98bf21; >

Попробуйте сами »
Щелкните на кнопке «Попробуйте сами» чтобы увидеть как это работает

В CSS можно указать различные границы для разных сторон:

Пример

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

Попробуйте сами »
Щелкните на кнопке «Попробуйте сами» чтобы увидеть как это работает

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

Пример

border-style:dotted solid;

Попробуйте сами »
Щелкните на кнопке «Попробуйте сами» чтобы увидеть как это работает

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

Свойство border-style используется в примере выше. Однако, это также работает и со свойствами border-width и border-color.

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

Чтобы укоротить код, можно указать все свойства границы в одном свойстве. Оно называется стенографическим (или сокращенным) свойством.

Пример

border:5px solid red;

Попробуйте сами »
Щелкните на кнопке «Попробуйте сами» чтобы увидеть как это работает

При использовании свойства border, порядок значений таков:

Еще примеры

Все свойства верхней границы в одном объявлении
Этот пример демонстрирует стенографическое свойство для установки всех свойств верхней границы в одном объявлении.

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

Установка ширины левой границы
Этот пример демонстрирует, как установить ширину левой границы.

Установка цвета четырех границ
Этот пример демонстрирует, как установить цвет четырех границ. Они могут иметь от одного до четырех цветов.

Установка цвета правой границы
Этот пример демонстрирует, как установить цвет правой границы.

Источник

Градиентные границы в CSS

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

Допустим, вам нужна градиентная граница вокруг определенного элемента. И вы, такой, думаете:

Выглядеть это будет как-то так:

Если вам не нравится идея оберточного элемента, вы можете использовать псевдоэлемент, до тех пор, пока отрицательное значение z-индекса в порядке (этого не произошло бы, если бы было много вложений родительских элементов с их собственными фонами).

Вот пример Стивена Шоу, закрепляющий border-radius :

Редакторский дайджест

Присылаем лучшие статьи раз в месяц

Скоро на этот адрес придет письмо. Подтвердите подписку, если всё в силе.

Похожие публикации

Несколько дельных советов по CSS

Полезные техники HTML, CSS и JavaScript

[Перевод] CSS Filters

Заказы

AdBlock похитил этот баннер, но баннеры не зубы — отрастут

Минуточку внимания

Комментарии 12

Исправили 🙂 Но вот если серьёзно — у меня на телефоне есть 2 приложения «часы», 2 приложения «сообщения», 2 магазина приложений, 2 браузера и ещё много чего по 2. Причём самсунговские ещё и не удаляются на стандартной прошивке.

Я думаю рано или поздно мобильные телефоны придут к чему то наподобие диалога установки браузеров в windows — включаешь новый телефон и оно тебя спрашивает что конкретно ставить

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

И Chrome, во избежание дублирования приложений, с самсунгофона, насколько это позволяет утверждать мой личный опыт, штатно выпиливается — при этом вместо него автоматически устанавливается Android System WebView, но это нужный компонент, который, как я понял, используется разными приложениями, которым может потребоваться отображать веб-контент.

Источник

border-image

Internet Explorer	Chrome		Opera		Safari	Firefox		Android	iOS
11.0+	7.0+	15.0+	10.5+	15.0+	3.0+	3.5+	15+	2.1+	1.0+

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

Значение по умолчанию	none
Наследуется	Нет
Применяется	Ко всем элементам, за исключением тех, у кого border-collapse задан как collapse
Процентная запись	Неприменима
Ссылка на спецификацию	http://www.w3.org/TR/css3-background/#border-images

Версии CSS

Описание

Синтаксис

border-image: none | [ [ | ] <1,4>[/ <1,4>]? ] && [stretch | repeat | round]

Значения

Путь к графическому файлу. Обязательный параметр.

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

Рис. 1. Изображение для создания рамки

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

Рис. 2. Деление исходного изображения на области

Разрешается использовать одно, два, три или четыре значения, разделяя их между собой пробелом. Эффект зависит от количества значений и приведен в табл. 1.

Влияние этих параметров на вид рамки показано на рис. 3.

stretch	repeat	round

Рис. 3. Результат использования параметров stretch, repeat и round

HTML5 CSS2.1 CSS3 IE Cr Op Sa Fx

Результат примера показан на рис. 1.

Рис. 4. Вид рамки в браузере Chrome

Браузеры

Источник