Как скруглить углы в css

Как скруглить углы внутрь блока с обводкой

Интересует верстка блока с закругленными внутрь углами. Важно не просто их скруглить, но и сохранить обводку у блока. введите сюда описание изображения

Версия @Ruslan_K, но с границами:

Основная идея: вырезать лишние области с помощью псевдоэлементов.
Понадобится всего два блока в разметке ( .wrapper и .content ):

Блок с классом .demo добавлен только для понимания того, как это все работает.

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

Сгенерировать градиент можно с помощью online-сервиса Ultimate CSS Gradient Generator.

Скругленные углы таблицы только CSS

Я искал и искал, но не смог найти решение для моей потребности.

у меня есть простая таблица OL ‘ HTML. Мне нужны для этого круглые углы,без использование изображений или JS, т. е. pure только CSS. Вот так:

Table layout sketch

закругленные углы для угловых ячеек, а 1px толстая граница для ячеек.

пока у меня есть это:

но, что оставляет меня без каких-либо границ для клетка. Если добавить границы, они не закруглены!

15 ответов

Кажется, отлично работает в FF и Chrome (не тестировал никаких других) с отдельными границами:http://jsfiddle.net/7veZQ/3/

Edit: вот относительно чистая реализация вашего эскиза:

во-первых, вам нужно больше, чем просто -moz-border-radius Если вы хотите поддерживать все браузеры. Вы должны указать все варианты, включая plain border-radius следующим образом:

во-вторых, чтобы напрямую ответить на ваш вопрос, border-radius фактически не отображает границу; он просто устанавливает, как выглядят углы границы, если она есть.

чтобы повернуть на границе, и таким образом получить ваши закругленные углы, вам также нужно border атрибута td и th элементы.

вы также увидите закругленные углы, если у вас есть цвет фона (или графика), хотя, конечно, это должен быть другой цвет фона для окружающего элемента, чтобы закругленные углы были видны без границы.

стоит отметить, что некоторые старые браузеры не любят ставить border-radius таблиц/ячеек таблицы. Возможно, стоит поставить <div> внутри каждой ячейки и стиль, который вместо этого. Однако это не должно влияет на текущие версии любых браузеров (кроме IE, который вообще не поддерживает закругленные углы — см. ниже)

наконец, не то, что IE не поддерживает border-radius вообще (IE9 beta делает, но большинство пользователей IE будут на IE8 или меньше). Если вы хотите взломать IE для поддержки border-radius, посмотрите наhttp://css3pie.com/

хорошо, это меня достало, поэтому я сделал некоторые тесты.

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

Закругление углов в CSS

Закругление углов в CSS
А как сделать также, только у каждого угла будет свой набор дивов? Я примерно представляю, но как.

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

Закругление углов фото
Подскажите, народ) Какой тег ввести для закругления фото по 2 верхним углам? В интернете несколько.

Закругление углов у блока
Подскажите как закруглить уголки у блока чтобы во всех браузерах отображалось ?

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

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