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

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

  • автор:

border — color

Какого цвета будет рамка вокруг элемента? Решать вам!

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

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

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

Кратко

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

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

Пример

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

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

 

Блок текста, обведённый рамкой

p>Блок текста, обведённый рамкойp>
 p  border-style: solid; border-color: #2E9AFF;> p  border-style: solid; border-color: #2E9AFF; >      

Как пишется

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

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

  1. border — color : # 2 E9 A F F — одно значение, цвет рамки со всех сторон одинаковый.
  2. border — color : # 2 E9 A F F # F498 A D — два значения, первое устанавливает цвет рамки сверху и снизу, второе — слева и справа.
  3. border — color : # 2 E9 A F F # F498 A D # F F8630 — три значения, первое значение устанавливает цвет рамки сверху, второе — слева и справа, а третье — снизу.
  4. border — color : # 2 E9 A F F # F498 A D # F F8630 # 41 E847 — четыре значения, устанавливает для каждой стороны свой цвет, поочерёдно: для верхней, правой, нижней и левой рамки.

Разрешается любое доступное обозначение цвета в вебе, а также ключевые слова transparent (для прозрачной рамки) или inherit (для наследования значения родителя).

Подсказки

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

�� Свойство не наследуется.

�� Значение по умолчанию соответствует значению color у элемента.

�� Можно анимировать, читайте подробнее про CSS — анимации .

�� Поддерживается всеми современными браузерами.

На практике

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

Максим Печёрин советует

Скопировать ссылку «Максим Печёрин советует» Скопировано

�� Чаще всего это свойство используется в шорткате border , а отдельно пишется, если все свойства рамки сохраняются, а цвет нужно изменить, например по событию :hover или :focus . Или когда вы используете методологию БЭМ, и все свойства рамки прописаны у элемента, а цвет рамки — у модификатора. Вот пример:

   

Текст

Текст с модификатором

div class="block"> p class="block__element">Текстp> p class="block__element block__element--modify">Текст с модификаторомp> div>
 .block__element  border-width: 1px; border-style: solid;> .block__element--modify  border-color: tomato;> .block__element  border-width: 1px; border-style: solid; > .block__element--modify  border-color: tomato; >      

Рамки и линии CSS/HTML

Рамки и линии CSS/HTML

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

Рамка для блока CSS

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

Пример

HTML

CSS

 .block-border < width: 100px; height: 100px; border: 2px solid #f66d52; /* Параметры рамки */ background: #ccc; /* Цвет фона */ >

Рамка внутри блока или картинки при наведении

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

Пример

HTML

  

CSS

 img:hover < outline: 2px dashed #3d1f15; /* Ширина, вид и цвет рамки */ outline-offset: -10px; /* Выводим рамку внутри элемента */ >

Рамка к изображению при наведении

Такая рамка может пригодиться в галерее, а так же если нужно выделить то или иное изображение при наведении. Рамка вокруг изображений делается с помощью свойства border, которое добавляется к селектору img. Чтобы рамка появлялась только при наведении курсора мыши на картинку, следует воспользоваться псевдоклассом :hover.

Пример

HTML

  

CSS

 img:hover < border: 3px solid #413f3f; /* Ширина, вид и цвет рамки */ >

Как добавить вертикальную линию к тексту

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

Рамка над блоком css/html

Всем привет! 1.Подскажите плиз как сделать рамку над блоком, я ее сделать сделал, но при уменьшении размера экрана она съезжает и уезжает куда то в дальний восток=(( 2. И тоже самое с конвертиком внизу-справа. Тоже сделал, но уезжает Вообщем нужен адаптив на 3

.forder__section < width: 96%; margin: 60px auto; position: relative; >.forder__container::after < display: block; content: ''; position: absolute; width: 0; height: 0; border-bottom: 70px solid #f0f5f7; bottom: -60px; border-top-right-radius: 25px; z-index: -1; right: 80px; transform: rotateX(180deg); border-left: 100px solid transparent; >.forder__container::before < content: ''; position: absolute; display: block; width: 100%; height: 90%; border: 10px solid #f7f0f6; top: -25px; left: 30px; border-radius: 10px; >.forder__wrapper < max-width: 1013px; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 50px 0 85px 0; margin: 0 auto; border-radius: 10px; background-color: #f0f5f7; >.forder__title::before < content: url(../public/cart.svg); margin-right: 10px; >.forder__title < line-height: 1.2; font-size: 30px; text-align: center; margin: 0; >.forder__text < font-size: 18px; margin-bottom: 50px; >.forder__input < color: #35A2B7; color: transparent; border-color: #35A2B7; >.forder__checkbox < display: none; >.forder__checkbox_txt < cursor: pointer; >.forder__checkbox_txt::before < content: " "; display: inline-block; margin-right: 15px; text-align: center; width: 15px; height: 15px; border-radius: 5px; box-shadow: inset 0 1px 2px #000; background: #35A2B7; border: 1px solid #35A2B7; >.forder__checkbox:checked + .forder__checkbox_txt::before < content: url(../public/checkbox.svg); >.forder__form_policy

 

Закажи сейчас и получи бесплатную
консультацию на своем участке

Перезвоним в течение 10 минут и оформим заявку

Имя Телефон

введите сюда описание изображения

размера(до 767px)-(767px — 1150px) и после Все остальное сделал, спс)

CSS-рамки

Рамки — это такие линии, которые окружают элемент (содержащийся в нём контент и отступы вокруг него). Пример, с которым мы уже сталкивались — рамки ячеек внутри таблицы.

CSS предусматривает два типа рамок: внутренние границы и внешние линии. Свойства CSS, отвечающие за оформление рамок, начинаются со слова «border», которое как раз и можно перевести как «Рамка», «Граница». Наличие и формат внешнего контура задаются свойствами, начинающимися словом «outline». Outline, в отличие от border, не влияет на ширину и положение обрамляемого блока. Кроме того, его нельзя установить только с одной стороны, как border — только со всех сторон сразу.

Сначала поговорим об оформлении border, потом перейдём к outline.

border-width

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

Количество значений

Результат

Одинаковая ширина рамок со всех сторон.

Первое значение задаёт толщину верхней и нижней рамок, второе — левой и правой.

1 — верхняя рамка, 2 — левая и правая, 3 — нижняя.

Значения ширины, начиная с верхней границы по часовой стрелке (верхняя, правая, нижняя, левая).

Задавать ширину можно как с помощью привычных пикселей, процентов и других единиц длины CSS, так и зарезервированными словами thin (2px), medium (4px) и thick (6px).

border-width: 16px 12px 4px 8px;

Различная ширина рамки

border-style

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

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

Различная ширина рамки

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

border-style: solid double dotted none

border-color

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

border-color: #C85EFA;

border

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

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

outline-width

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

outline-style

Значения свойства дублируют значения border-style. Правило задаёт стиль внешнего контура.

Толщина внешнего контура

outline-color

Определяет цвет внешнего контура.

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

Цвет внешнего контура

outline

Объединяющее три предыдущих свойство, аналог border.

   outline h1 

Заголовок с внешним контуром

Заголовок с внешним контуром

Чтобы редактировать HTML online воспользуйтесь визуальным редактором по ссылке.

Полезные ссылки:

  • Основы HTML — бесплатный 2-х часовой видеокурс по основам HTML;
  • Бесплатный курс по верстке сайта — пример блочной вёрстки с чистого листа;
  • Вёрстка сайта с нуля 2.0 — полноценный платный курс;
  • Создание приложений для Android — для тех, кто давно хотел попробовать себя в мобильной разработке (не для новичков).

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

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