Как сделать рамку в css: Как сделать рамку? CSS-свойство border

Leave a Comment / Css / By /

Рамки элементов

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

Рамки можно определять для большинства элементов внутри тела веб-страницы.

У меня рамка со всех сторон.

У меня красная рамка снизу.

У меня рамка с закругленными углами.

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

CSS свойство border-style

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

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

  • dotted — Рамка состоит из точек
  • dashed — Рамка состоит из черточек
  • solid — Сплошная линия
  • double — Двойная сплошная линия
  • groove — 3D рамка, представляющая прорезанный желоб. Эффект зависит от значения свойства border-color
  • ridge — 3D рамка, представляющая оттиснутую борозду. Эффект зависит от значения свойства border-color
  • inset — 3D рамка, представляющая вдавленное углубление. Эффект зависит от значения свойства border-color
  • outset — 3D рамка, представляющая выставленное возвышение. Эффект зависит от значения свойства border-color
  • none — Без рамки
  • hidden — Скрытая рамка

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

Пример

Определение различных стилей рамки:

p.dotted {border-style: dotted;}
p.dashed {border-style: dashed;}
p.solid {border-style: solid;}
p.double {border-style: double;}
p.groove {border-style: groove;}
p.ridge {border-style: ridge;}
p.inset {border-style: inset;}
p.outset {border-style: outset;}
p.none {border-style: none;}
p.hidden {border-style: hidden;}
p.mix {border-style: dotted dashed solid double;}

Результат:

Рамка из точек (dotted).

Рамка из черточек (dashed).

Сплошная линия (solid).

Двойная сплошная линия (double).

Прорезанный желоб (groove). Эффект зависит от значения свойства border-color.

Оттиснутая борозда (ridge). Эффект зависит от значения свойства border-color.

Вдавленное углубление (inset). Эффект зависит от значения свойства border-color.

Выставленное возвышение (outset). Эффект зависит от значения свойства border-color.

Без рамки (none).

Скрытая рамка (hidden).

Смешанные рамки.

Внимание! НИКАКОЕ другое свойство управления рамками не будет работать пока не будет определено свойство border-style.

CSS свойство border-width

Свойство border-width определяет толщину рамки для всех четырех сторон элемента.

Толщина может задаваться в единицах измерения (px, pt, cm, em, и т. д.), либо при помощи предопределенных ключевых слов: thin, medium, thick.

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

p.one {
  border-style: solid;
  border-width: 5px;
}
p.two {
  border-style: solid;
  border-width: medium;
}
p. three {
  border-style: dotted;
  border-width: 2px;
}
p.four {
  border-style: dotted;
  border-width: thick;
}

Результат:

5px border-width

medium border-width

2px border-width

thick border-width

Индивидуальная толщина рамки для каждой стороны элемента

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

p.one {
  border-style: solid;
  border-width: 5px 20px; /* 5px верхняя и нижняя рамки, 20px по сторонам */
}
p.two {
  border-style: solid;
  border-width: 20px 5px; /* 20px верхняя и нижняя рамки, 5px по сторонам */
}
p.three {
  border-style: solid;
  border-width: 25px 10px 4px 35px; /* 25px верхняя, 10px правая, 4px нижняя, 35px левая */
}

CSS свойство border-color

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

Цвет можно задать как

  • имя цвета — например, «red»,
  • HEX значение — например, «#ff0000»,
  • RGB значение — например, «rgb(255,0,0)»,
  • HSL значение — например, «hsl(0,100%,50%)»,
  • transparent.

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

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

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

p.one {
  border-style: solid;
  border-color: red;
}
p.two {
  border-style: solid;
  border-color: green;
}
p.three {
  border-style: dotted;
  border-color: blue;
}

Результат:

Красная рамка

Зеленая рамка

Синяя рамка

Индивидуальный цвет рамки для каждой стороны элемента

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

p.one {
  border-style: solid;
  border-color: red green blue yellow; /* red - верх, green - справа, blue - низ, yellow - слева */
}

Определение рамки для каждой стороны индивидуально

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

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

Пример:

p {
  border-top-style: dotted;
  border-right-style: solid;
  border-bottom-style: dotted;
  border-left-style: solid;
}

Результат:

Разные стили рамки

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

p {
  border-style: dotted solid;
}

Вот как это работает:

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

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

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

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

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

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

Если у border-style определено одно значение:

  • border-style: dotted;
    • все четыре стороны рамки состоят из точек (dotted)
/* Четыре значения */
p {
  border-style: dotted solid double dashed;
}
/* Три значения */
p {
  border-style: dotted solid double;
}
/* Два значения */
p {
  border-style: dotted solid;
}
/* Одно значение */
p {
  border-style: dotted;
}

Выше мы использовали свойство border-style, но все сказанное также работает и со свойствами

border-width и border-color.

p {
  border-style: solid;
  border-top-width: 10px;
  border-right-width: 10px;
  border-bottom-width: 10px;
  border-left-width: 10px;
}

CSS свойство border. Короткая форма записи

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

Тем не менее, чтобы уменьшить размер кода, существует возможность все эти многочисленные свойства объединить в одном CSS свойстве.

Свойство border является короткой формой записи, объединяющей воедино следующие свойства:

  • border-width
  • border-style (обязательно)
  • border-color

Пример:

p {
  border: 5px solid red;
}

Результат:

Какой-то текст

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

Рамка слева:

p {
  border-left: 6px solid red;
}

Результат:

Какой-то текст

Рамка снизу:

p {
  border-bottom: 6px solid red;
}

Результат:

Какой-то текст

Добавьте следующий код в ваш CSS файл:

h3 {
   border-style: dashed;
   border-width: 3px;
   border-left-width: 10px;
   border-right-width: 10px;
   border-color: red;
}

Эта декларация определяет прерывистую рамку красного цвета вокруг заголовков второго уровня (элементы <h3>), у которой толщина верхней и нижней стороны будет 3 пикселя, а левой и правой — 10 пикселей (здесь 3-х пиксельная толщина рамки, определяемая в начале для всех сторон рамки, переопределяется).

CSS свойство border-radius

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

Обычная рамка

Рамка со скругленными углам

Рамка с более скругленными углам

Рамка с сильно скругленными углам

Пример:

p {
  border: 2px solid red;
  border-radius: 5px;
}

Все CSS свойства определения рамки

СвойствоОписание
borderКороткое свойство, определяющее все атрибуты рамки HTML элемента за одну декларацию
border-bottomОпределяет все атрибуты нижней рамки HTML элемента за одну декларацию
border-bottom-colorОпределяет цвет нижней рамки HTML элемента
border-bottom-styleОпределяет стиль нижней рамки HTML элемента
border-bottom-widthОпределяет толщину нижней рамки HTML элемента
border-colorОпределяет цвет всех четырех сторон рамки HTML элемента
border-leftОпределяет все атрибуты левой рамки HTML элемента за одну декларацию
border-left-colorОпределяет цвет левой рамки HTML элемента
border-left-styleОпределяет стиль левой рамки HTML элемента
border-left-widthОпределяет толщину левой рамки HTML элемента
border-radiusОпределяет радиус скругления углов рамки
border-rightОпределяет все атрибуты правой рамки HTML элемента за одну декларацию
border-right-colorОпределяет цвет правой стороны рамки HTML элемента
border-right-styleОпределяет стиль правой рамки HTML элемента
border-right-widthОпределяет толщину правой рамки HTML элемента
border-styleОпределяет стиль всей рамки вокруг элемента
border-topОпределяет все атрибуты верхней рамки HTML элемента за одну декларацию
border-top-colorОпределяет цвет верхней рамки HTML элемента
border-top-styleОпределяет стиль верхней рамки HTML элемента
border-top-widthОпределяет толщину верхней рамки HTML элемента
border-widthОпределяет толщину всех четырех сторон рамки HTML элемента

border-style — CSS — Дока

  1. Кратко
  2. Пример
  3. Как пишется
    1. Редкие значения
  4. Как понять
  5. Подсказки

Кратко

Скопировано

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

Пример

Скопировано

Вокруг абзаца текста будет рамка, состоящая из чёрточек:

p {  border-style: dashed;}
          p {
  border-style: dashed;
}

Как пишется

Скопировано

Стиль рамки задаётся при помощи ключевых слов:

  • none — отключает рамку (значение по умолчанию).
  • solid — сплошная рамка. Этот стиль используется чаще всего.
  • dotted — рамка состоит из точек с пробелами между ними.
  • dashed — рамка состоит из коротких чёрточек с пробелами между ними.
  • double — рамка состоит из двух сплошных линий с небольшим нерегулируемым отступом между ними.

Редкие значения

Скопировано

Ниже будут перечислены редко используемые стили рамки:

  • groove — рамка объёмная, с тенями от источника света, находящегося в верхнем левом наружном углу.
  • ridge — рамка объёмная, с тенями от источника света, находящегося в нижнем правом внешнем углу.
  • inset — рамка с тенями от источника света, находящегося в нижнем правом внутреннем углу.
  • outset — рамка с тенями от источника света, находящегося в левом верхнем внутреннем углу.

Понять текстовое описание этих стилей довольно сложно, посмотрите пример ниже:

Открыть демо в новой вкладке

Как понять

Скопировано

Свойство border-style является шорткатом для свойств:

  • border-bottom-style
  • border-left-style
  • border-right-style
  • border-top-style

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

Подсказки

Скопировано

💡 Достаточно определить стиль рамки для того, чтобы она появилась вокруг элемента. Остальные значения будут установлены в значения по умолчанию: ширина рамки 3 пикселя, а цвет такой же, как унаследованный цвет текста (по умолчанию — чёрный).

💡 Если рамка тонкая, например, 1 пиксель, то внешне значение double почти не будет отличаться от solid. Для визуальной разницы задавайте рамку большей ширины.

💡 Если border-style свойство применяется к таблице со свойством border-collapse в значении collapsed, то inset будет вести себя как groove, outset — как ridge.

Если вы нашли ошибку, отправьте нам пул-реквест!

Во время отправки формы что-то пошло не так. Попробуйте ещё раз?

←

border-image

ctrl + alt + ←

→

border-radius

ctrl + alt + →

Как добавить границу в CSS

следующий → ← предыдущая

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

  • border-width: Свойство border-width используется для установки ширины границы. Мы также можем использовать предопределенные значения, равные 9.0008 тонкий, средний, и толстый
    для установки ширины границы. Он устанавливает толщину границы. Его значение по умолчанию — средний .
    Это свойство нельзя использовать отдельно. Он всегда используется с другими свойствами границы, такими как свойство «border-style», чтобы сначала установить границу; в противном случае это не сработает.
    Ширина границы может быть разной для каждой отдельной стороны. Это можно сделать, используя ширину нижней границы, ширину верхней границы , ширину правой границы 9.0009 и граница слева ширина .
  • стиль границы: Это свойство определяет стиль границы. Он определяет, является ли граница сплошной, пунктирной, пунктирной, двойной, канавкой и одним из других возможных значений. Без установки этого свойства, т. е. без установки стиля границы, никакие другие свойства границы работать не будут. Граница будет невидимой без указания
    border-style     . Это связано с тем, что значение этого свойства CSS по умолчанию равно 9.0008 нет     .
    Подобно border-width , стиль границы может быть разным для каждой отдельной стороны. Это можно сделать с помощью свойств border-bottom-style, border-top-style, border-right-style и border-left-style .
  • border-color: Позволяет изменить цвет границы. Мы можем установить цвет, используя имя цвета, значение RGB или шестнадцатеричное значение. Аналогично border-width и border-style , мы можем изменить цвет границы индивидуально, т. е. мы можем изменить цвет нижней, верхней, левой и правой сторон границы элемента. Это можно сделать, используя свойства border-bottom-color, border-top-color, border-right-color
    и border-left-color .
    Свойство border-color нельзя использовать отдельно. Его необходимо использовать с другими свойствами границы, такими как свойство «border-style», чтобы установить границу; в противном случае это не сработает.

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

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

Давайте рассмотрим пример, чтобы понять свойство границы.

Пример

<голова> <стиль> п{ граница: 4 пикселя синяя; размер шрифта: 20px; красный цвет; выравнивание текста: по центру; } p.none {стиль границы: нет;} p.dotted {граница: пунктирная;} p.dashed {стиль границы: пунктир;} p.solid {стиль границы: сплошной;} p.double {стиль границы: двойной;} p.groove {стиль границы: канавка;} p.ridge {стиль границы: хребет;} p.inset {стиль границы: вставка;} p.outset {стиль границы: начало;} p.hidden {стиль границы: скрытый;} <тело>

Без границы.

Точечная граница.

Штриховая граница.

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

Двойная рамка.

Граница канавки.

Граница хребта.

Вставленная граница.

Начальная граница.

Скрытая рамка.

Протестируйте сейчас

Выход

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

Пример

<голова> <стиль> дел { граница: 3 пикселя сплошного красного цвета; контур: 3 пикселя сплошного синего цвета; радиус границы: 12px; размер шрифта: 20px; вес шрифта: полужирный; поле: 30 пикселей; отступ: 30 пикселей; смещение контура: 0,5 em; } <тело> <дел>

Добро пожаловать на сайт javaTpoint.com

В этом элементе div мы используем свойства контура и границы. Контур представлен синим цветом, а граница красным цветом.

Протестируйте сейчас

Выход

Следующая темаКак выровнять изображения в CSS

← предыдущая следующий →

граница | CSS-трюки — CSS-трюки

DigitalOcean предоставляет облачные продукты для каждого этапа вашего путешествия. Начните с бесплатного кредита в размере 200 долларов США!

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

 .элемент{
  граница: 3 пикселя сплошного красного цвета;
  ширина: 200 пикселей;
  соотношение сторон: 1;
}

 

Синтаксис 

 border:  || <стиль строки> ||

Значения

Свойство border принимает одно или несколько из следующих значений в комбинации:

  • border-width : определяет толщину границы.
    • : числовое значение, измеренное в единицах px , em , rem , vh и vw единиц.
    • тонкий : Эквивалент 1 пикс
    • средний : Эквивалент 3px
    • толстый : Эквивалент 5px
  • стиль границы : указывает тип линии, нарисованной вокруг элемента, включая:
    • сплошная : сплошная непрерывная линия.
    • нет (по умолчанию): линия не рисуется.
    • скрыто : Линия нарисована, но не видна. это может быть удобно для добавления небольшой дополнительной ширины к элементу без отображения границы.
    • пунктир : Линия, состоящая из дефисов.
    • с точками : Линия, состоящая из точек.
    • double : Вокруг элемента рисуются две линии.
    • канавка : Добавляет скос на основе значения цвета таким образом, чтобы элемент выглядел вдавленным в документ.
    • гребень : Аналогичен канавке , но значения цвета меняются таким образом, что элемент кажется приподнятым.
    • вставка : Добавляет к линии разделенный тон, который делает элемент слегка вдавленным.
    • outset : Аналогичен inset , но цвета меняются местами таким образом, что элемент кажется слегка приподнятым.
  • цвет границы : определяет цвет границы и принимает все допустимые значения цвета.

Уф, сколько стоит одно маленькое имущество! Вот демонстрация, которая иллюстрирует различия между всеми этими значениями стиля:

составляющие свойства

Свойство Граница представляет собой сокращение для следующих свойств, связанных с границей:

. -start
border-bottom border-block-end
border-left

6

40104 border-inline-start

border-right border-inline-end

{.} граница: 3px сплошная #f8a100; }

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

 .element {
  верхняя граница: 3px сплошная #f8a100;
  граница справа: 3px сплошная #f8a100;
  нижняя граница: 3px сплошная #f8a100;
  граница слева: 3px сплошная #f8a100;
}

…или логический эквивалент:

 . element {
  начало блока границы: 3 пикселя сплошной #f8a100;
  граница-inline-end: 3px сплошная #f8a100;
  граница блока: 3px сплошная #f8a100;
  border-inline-start: 3px сплошная #f8a100;
}

Мы можем объявить границы только в направлении блока или в строке , так как пара этих логических свойств имеет свои собственные сокращения:

 .element {
  /* Верхняя (начало) и нижняя (конец) границы */
  бордюрный блок: 3px сплошной #f8a100;
  /* Левая (начало) и правая (конец) границы */
  встроенная граница: 3px сплошная #f8a100;
}

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

Вы можете рассчитывать на отличную поддержку свойства border во всех браузерах.

Chrome Safari Firefox Opera IE Android iOS
Yes Yes Yes 3.5+ 4+ Yes Да

Дополнительная информация

  • Спецификация уровня 3 модуля фона и границ CSS
  • Понимание изображения границы
  • Сказка о пограничных градиентах

пограничный блок

.element { бордюрный блок: 5px сплошной #f8a100; }

граница-граница

.элемент {граница границы: дисплей; }

обрушение границ

.element {граница-коллапс: отдельно; }

границы-обрушение границ

граница-изображение

.element { border-image: url(border.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *