Как сделать рамки в css
Перейти к содержимому

Как сделать рамки в css

  • автор:

border — style

Рамку можно сделать двойной, пунктирной и даже объёмной в точку! И всё это одним свойством.

Время чтения: меньше 5 мин

Открыть/закрыть навигацию по статье
Контрибьюторы:

Обновлено 28 августа 2023

Кратко

Скопировать ссылку «Кратко» Скопировано

Свойство 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 .

CSS: Рамки

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

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

Можно указывать несколько свойств, а можно всё объединить в рамках свойства border . Такой вариант встречается чаще всего и выглядит он так:

.element
  • 1px — ширина границы
  • solid — стиль границы
  • #ccc — цвет границы

Со значениями в пикселях и hex-цветом мы уже сталкивались в рамках курса, а вот стилей границ в CSS восемь:

и есть значение none , которое «удалит» границу, так как при значении border-style: none браузеры игнорируют другие свойства и удаляют границу

Примеры границ

solid (сплошная)
dotted (пунктирная)
dashed (штриховая)

 .border-dotted 

Задание

Добавьте в редактор с классом border-bold и установите сплошную границу толщиной 5 пикселей. Цвет рамки #2196F3 . Стили запишите в теге

Упражнение не проходит проверку — что делать? ��

Если вы зашли в тупик, то самое время задать вопрос в «Обсуждениях». Как правильно задать вопрос:

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

В моей среде код работает, а здесь нет ��

Тесты устроены таким образом, что они проверяют решение разными способами и на разных данных. Часто решение работает с одними входными данными, но не работает с другими. Чтобы разобраться с этим моментом, изучите вкладку «Тесты» и внимательно посмотрите на вывод ошибок, в котором есть подсказки.

Мой код отличается от решения учителя ��

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

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

Прочитал урок — ничего не понятно ��

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

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

Полезное

  • Попробуйте разные стили границ в редакторе

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

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 p.dashed p.solid p.double p.groove p.ridge p.inset p.outset p.none p.hidden p.mix

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

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

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

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

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

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

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

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

Скрытая рамка (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

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-color может принимать от одного до четырех значений (для верхней, правой, нижней и левой рамки).

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

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

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

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

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

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

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

Если у 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 , но все сказанное также работает и со свойствами border-width и border-color .

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

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

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

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

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

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

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

          Как сделать рамку в css

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

          Исходный HTML документ:

            class="block1">
class="block2">
class="circle">
div /* Расположим элементы друг над другом, зададим размер квадратов */ position: absolute; width: 200px; height: 200px; > .block1  /* зеленая граница, сплошная линия */ border: 5px solid rgb(123, 192, 59); /* смещаем квадрат от верхней и левой границы на 20px */ top: 20px; left: 20px; > .block2  /* Граница из "тире" розового цвета */ border: 5px dashed #cc295a; top: 55px; left: 55px; > .circle  /* Создаем круг */ border-radius: 50%; /* Граница синяя, двойная */ border: 5px double #32a1ce; /* Сделаем круг немного меньше чем квадраты */ width: 100px; height: 100px; top: 85px; left: 85px; > 

border-example

Результат:

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

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