Закругленная обводка и блок [закрыт]
Вопросы-опросники запрещены на Stack Overflow на русском. Для получения ответа, перефразируйте ваш вопрос так, чтобы на него можно было дать однозначно правильный ответ.
Закрыт 8 лет назад .
Всем привет! Надо сделать так, чтобы блок был с закрулгенными краями и обводка. Помогите!
Отслеживать
51.4k 86 86 золотых знаков 267 267 серебряных знаков 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
-
Важное на Мете
Похожие
Дизайн сайта / логотип © 2024 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2024.1.9.3159
Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.
border
Универсальное свойство border позволяет одновременно установить толщину, стиль и цвет границы вокруг элемента. Значения могут идти в любом порядке, разделяясь пробелом, браузер сам определит, какое из них соответствует нужному свойству. Для установки границы только на определенных сторонах элемента, воспользуйтесь свойствами border-top , border-bottom , border-left , border-right .
Синтаксис
Значения
Значение border-width определяет толщину границы. Для управления ее видом предоставляется несколько значений border-style . Их названия и результат действия представлен на рис. 1.
Рис.1. Стили рамок
border-color устанавливает цвет границы, значение может быть в любом допустимом для CSS формате.
inherit наследует значение родителя.
HTML5 CSS2.1 IE Cr Op Sa Fx
border
В данном примере вокруг слоя добавляется двойная граница. Результат показан на рис. 2.
Рис. 2. Применение свойства border
Объектная модель
[window.]document.getElementById(» elementID «).style.border
Браузеры
Браузер Internet Explorer до шестой версии включительно при толщине границы 1px отображает dotted как dashed . При толщине 2px и выше значение dotted работает корректно. Эта ошибка исправлена в IE7, но только для всех границ толщиной 1px. Если одна из границ блока имеет толщину 2px и выше, то в IE7 значение dotted превращается в dashed .
Internet Explorer до версии 7.0 включительно не поддерживает значение inherit .
Стиль границы в разных браузерах может несколько различаться при использовании значений groove , ridge , inset или outset .
Как сделать обводку в css?
Как сделать обводку вокруг прямоугольника со скругленными углами?
- Вопрос задан более трёх лет назад
- 2563 просмотра
Комментировать
Решения вопроса 1
frontend developer
border:1px solid black;
border-radius:20px;
Ответ написан более трёх лет назад
Комментировать
Нравится 1 Комментировать
Ответы на вопрос 1
Разработка бизнес-решений на 1С-Битрикс под ключ
Ответ написан более трёх лет назад
Комментировать
Нравится Комментировать
Ваш ответ на вопрос
Войдите, чтобы написать ответ
- HTML
- +2 ещё
Как распределить элементы на адаптивной, векторной кривой?
- 1 подписчик
- 17 минут назад
- 13 просмотров
- CSS
Как в гриде убрать пустое расстояние между колонками?
- 1 подписчик
- 52 минуты назад
- 47 просмотров
- HTML
- +1 ещё
Как сменить шрифт в css?
- 1 подписчик
- час назад
- 34 просмотра
- JavaScript
- +2 ещё
Не могу разобраться это не правильное поведение скрипта или стилей?
- 1 подписчик
- 6 часов назад
- 55 просмотров
- JavaScript
- +1 ещё
Как привязать кнопку к панораме в a-frame?
- 1 подписчик
- 13 часов назад
- 63 просмотра
- HTML
- +2 ещё
Не ставится background-image через селектор в теге selection, за то в теге div с тем же селектором все работает прекрасно. В чем ошибка и почему так?
- 1 подписчик
- 14 часов назад
- 43 просмотра
- HTML
- +1 ещё
Как расположить объекты в div в строчку?
- 1 подписчик
- 17 часов назад
- 73 просмотра
- HTML
- +1 ещё
Почему фоновая картинка то пропадает, то появляется?
- 1 подписчик
- 18 часов назад
- 48 просмотров
- CSS
- +1 ещё
Как изменить цвет svg заливки?
- 2 подписчика
- 18 часов назад
- 96 просмотров
- JavaScript
- +1 ещё
Почему popup окно открывается только со второго нажатия?
- 1 подписчик
- вчера
- 53 просмотра
от 210 000 ₽
от 35 000 до 40 000 ₽
09 янв. 2024, в 15:19
5000 руб./за проект
09 янв. 2024, в 15:14
1000 руб./в час
09 янв. 2024, в 14:57
3000 руб./за проект
Минуточку внимания
Присоединяйтесь к сообществу, чтобы узнавать новое и делиться знаниями
- Хештаблицы, можно ли мешать open addressing и chaining?
- 2 подписчика
- 0 ответов
- 2 подписчика
- 0 ответов
- 2 подписчика
- 1 ответ
- 2 подписчика
- 0 ответов
- 1 подписчик
- 1 ответ
- 2 подписчика
- 2 ответа
- 4 подписчика
- 3 ответа
- 3 подписчика
- 2 ответа
- 2 подписчика
- 0 ответов
- 2 подписчика
- 2 ответа
2.11. CSS-рамка
CSS-рамка элемента представляет собой одну или несколько линий, окружающих содержимое элемента и его поля padding . Рамка задаётся с помощью краткого свойства border . Стиль рамки задается с помощью трех свойств: стиль, цвет и ширина.
Оформление рамок HTML-элементов с помощью CSS-свойств
- Содержание:
- 1. Стиль рамки border-style
- 2. Цвет рамки border-color
- 3. Ширина рамки border-width
- 4. Задание рамки одним свойством border
- 5. Задание рамки для одной границы элемента border-top , border-bottom , border-left , border-right
1. Стиль рамки border-style
По умолчанию рамки всегда отрисовываются поверх фона элемента, фон распространяется до внешнего края элемента. Стиль рамки определяет ее отображение, без этого свойства рамки не будут видны вообще. Для элемента можно задавать рамку для всех сторон одновременно с помощью свойства border-style или для каждой стороны отдельно с помощью уточняющих свойств border-top-style и т.д. Не наследуется.
dotted
dashed
solid
double
groove
ridge
inset
outset
Одновременное перечисление четырех разных стилей для рамок элемента, только для свойства border-style :
2. Цвет рамки border-color
Свойство задаёт цвет рамок всех сторон одновременно. С помощью уточняющих свойств можно установить свой цвет для рамки каждой стороны элемента. Если для рамки цвет не задан, то он будет таким же, как и цвет текста элемента. Если в элементе нет текста, то цвет рамки будет таким же, как и цвет текста родительского элемента. Не наследуется.
border-color
(border-top-color, border-right-color, border-bottom-color, border-left-color)
Значения:
transparent
Устанавливает прозрачный цвет для рамки. При этом ширина рамки остается. Можно использовать для смены цвета рамки при наведении курсора мыши на элемент, чтобы избежать смещение элемента.
цвет
Цвет рамок задается при помощи значений свойства color.
Одновременное перечисление четырех разных цветов для рамок элемента, только для свойства border-color :
3. Ширина рамки border-width
Ширина рамки задается с помощью единиц измерения длины или ключевых слов. Если для свойства border-style задано значение none , и для рамки элемента установлена какая-то ширина, то в данном случае ширина рамки приравнивается к нулю. Не наследуется.
Возможность одновременного задания четырех разных ширин для рамок элемента, только для свойства border-width :
4. Задание рамки одним свойством
Свойство border позволяет объединить в себе следующие свойства: border-width , border-style , border-color , например:
При этом заданные свойства будут применяться ко всем границам элемента одновременно. Если какое-то из значений не указано, его место займет значение по умолчанию.
5. Задание рамки для одной границы элемента
В случае, когда необходимо задать разный стиль границ элемента, можно воспользоваться краткой записью для соответствующей границы.
Перечисленные ниже свойства объединяют в одно объявление следующие свойства: border-width , border-style и border-color . Перечень свойств указывается в заданном порядке, при этом одно или два значения могут быть пропущены, в этом случае их значения примут значения по умолчанию.
Стиль верхней границы задается с помощью свойства border-top , нижней — border-bottom , левой — border-left , правой — border-right .