Закругленная обводка и блок [закрыт]
Вопросы-опросники запрещены на 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
-
Важное на Мете
Похожие
Дизайн сайта / логотип © 2023 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2023.11.15.1019
Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.
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 одной таблицей