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

Закругленная обводка и блок [закрыт]

Вопросы-опросники запрещены на Stack Overflow на русском. Для получения ответа, перефразируйте ваш вопрос так, чтобы на него можно было дать однозначно правильный ответ.

Закрыт 8 лет назад .
Всем привет! Надо сделать так, чтобы блок был с закрулгенными краями и обводка. Помогите!
Отслеживать
51.2k 86 86 золотых знаков 266 266 серебряных знаков 505 505 бронзовых знаков
задан 26 июл 2013 в 4:44
69 2 2 серебряных знака 10 10 бронзовых знаков
26 июл 2013 в 9:58

3 ответа 3

Сортировка: Сброс на вариант по умолчанию

@bifot т.е. как закруглить края вы знаете, а как сделать обводку нет?

border-radius: 5px; border: 1px solid #000;

Отслеживать
ответ дан 26 июл 2013 в 6:20
9,350 3 3 золотых знака 25 25 серебряных знаков 44 44 бронзовых знака
Мне нужно и обводку и сам div закруглить
26 июл 2013 в 6:43

Рабочий пример на jsFiddle

css

#holder < border-radius: 50% 50% 50% 50%; border: 1px black solid; height: 200px; width: 200px; >#holder div

html

текст

Отслеживать
ответ дан 26 июл 2013 в 13:04
19.9k 5 5 золотых знаков 44 44 серебряных знака 61 61 бронзовый знак

border-radius: 50px; /** это круг */

Отслеживать
ответ дан 26 июл 2013 в 4:54
1,918 6 6 золотых знаков 39 39 серебряных знаков 54 54 бронзовых знака
Знаю как бы! Но закругляет только конец краев. А мне нужно обводку и конец краев!
26 июл 2013 в 5:28

Важное на Мете

Box-sizing

Свойство box-sizing позволяет указать как ведут себя размеры блока при наличии рамок и полей. Применяются к элементам, у которых заданы размеры.

content-box — отступы и рамки рисуются снаружи блока блока и увеличивают его размеры (значение по умолчанию).

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

border-box — элемент сохраняет заданные размеры, отступы и рамки отрисовываются внутрь элемента.

Свойство довольно широко поддерживается браузерами, в некоторых случаях требуются префиксы. Подробнее можно посмотреть на caniuse.com/#feat=css3-boxsizing

Ссылки по теме: * < Box-sizing: Border-box >FTW Метки: раскладка
Показать комментарии

Сайдбар

Статьи

Математические функции в CSS
Адаптивное видео с помощью встроенных математических функций CSS
Недоступность в картинках
Единицы размеров в CSS
Генератор цветовых тем
Jekyll → Gatsby
Вариативные шрифты
Размеры в SVG
Адаптивный Pixel Perfect
Логотип не отвечает или временно недоступен
SVG-паттерны
Мыльные пузыри на SVG
SVG-градиенты
Весёлая консолька
SVG-маски
Умная прокрутка со Scroll Snap Points
CSS-анимации для ротации изображений
Анимированные SVG-маски
Странности обводки в SVG
SVG-прелоадеры
Анимируем градиенты ещё раз
Background-blend-mode
Возможности оформления SVG
CSS и SVG маски
Nth-child и nth-of-type
SVG-иконки
SVG: заливка и обводка
SVG-path
SVG: группировка и переиспользование элементов
SVG-фигуры и трансформации
SVG
СSS-градиенты и 3D
Рисовалка анимированных теней
Свежие CSS-паттерны
CSS-паттерны
Радиальные градиенты
Линейные градиенты
Крестики-нолики на CSS
Border-image
Электронные часы на CSS и JS.
Сколько весят селекторы?
Символы юникода
Свойство content
Анимируем CSS-градиенты
Текстовые эффекты
Древовидный список на CSS
Css-селекторы, часть 2
Css-селекторы
Контекст наложения
Два способа «прошить» элемент по краю
Box-sizing
Цвета в CSS
Фон под строчками: добавляем поля
Box-shadow
Css-фигуры: лепесток
Transform
Css Animation
3D-куб
Border-radius
First letter
Эти глаза напротив
CSS-фигуры
Стрелки с помощью свойства border
Flexbox

Страницы

SVG: полезные ссылки
CSS-селекторы одной таблицей
Таблица именованных цветов
Функции Transform
Свойства Transform
Свойства Animation одной таблицей
Разный синтаксис Flexbox
Свойства Flexbox одной таблицей