Почему не работает бордер радиус

Глюки при отрисовке border-radius в Windows 10

Совсем недавно тысячи желающих обновили свои PC на новую версию Windows — 10. Вроде как хорошо, система новая, и браузер Edge, который освободит разработчиков от большого количества проблем. Но сегодня с утра мне прислали замечательный скриншот одного из моих сайтов и я решил разобраться «что к чему».

Фото было вот такого вида:

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

Развернул Windows 10 в Virtualbox и увидел несколько другую, но не менее странную картинку…
Артефакт у верхнего левого угла меню и подложки под текстом.

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

Попутно нашел странные артефакты на логотипе в SVG:

К сожалению, под рукой не было PC-ноута, дома еще раз проверю все это на живом железе, но в Virtualbox удаление драйвера решило проблему и с SVG и с закруглениями. Что делать на реальном железе — видимо, ждать нормальных драйверов на видеокарту. Или установить их самостоятельно. Видимо драйверы от Windows 8 не подходят на 100%, а почти все обновлялись со старой системы. Чую, запросов от клиентов на эту тему прибавится в ближайшие дни.

После удаления драйвера:

И если кто-то сомневается, что это у меня такая верстка кривая — скрин twitter с этой же виртуальной машины:

UPD
Труп hasLayout, holy hack и прочее, как это называлось в стародавние времена восстал из мертвых!

На «железном» ноуте словил точно такой же глюк, как мне прислали. Видеокарта HD3000. Проблема излечилась удалением драйвера, но разрешение стало плохое и после перезагрузки он скачался снова. Сразу попробовал стародавний метод лечения — в лучших традициях средневековья:

И всё! Правда, сработало не на всех страницах…
Microsoft, как так?

Источник

Блог Vaden Pro

Особенности работы свойства border-radius

В статье описаны особенности применения свойства border-radius. Также представлены проблемы в отображении для разных браузеров и предложены возможные варианты их решения.

С выходом новой версии CSS3 решилась одна из самых сложных проблем в веб-дизайне. В новой версии продукта появилось новое свойство border-radius, с помощью которого можно легко округлять углы блока там, где это необходимо. Теперь верстальщики могут забыть о трудоемких процессах реализации такого простого решения, как скругление углов через тот же photoshop.

Однако, как оказалось, не все браузеры были готовы к выходу новинки от CSS3. Некоторые из них не совсем корректно обрабатывают скругление, на лицо недоработки и промахи.

Проблемы с webkit-браузерами

Проведя тестирование на разных браузерах мы обнаружили один не очень приятный эффект при отработки свойства в webkit-браузерах. Для наглядности рассмотрим, как выводит скругление Firefox и Chrome:

Глядя на картинку в первую очередь можно отметить, что Firefox более плавно обрабатывает скругление, Chrome отрисовывает слегка угловатый полукруг. Также мы видим, что у хрома установленная рамка в некоторых местах просвечивается и видно заливку заднего фона.

Ввиду этого необходимо расставить приоритеты при создании сайта. Либо следует отдать предпочтение простоте кода и быстрой загрузке веб страницы, что реализуется в случае использования border-radius, либо делаем уклон на красоту и аккуратность, что легко достигается при использовании бекграундных картинок.

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

Проблемы скруглений изображения

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

Ожидали увидеть скругленную картинку с красной рамкой, а видим

Однако, аналогично прошлому случаю, этой проблемой болеет поколение браузеров, которые постарше. Их потомки справляются отлично с таким кодом и свойство срабатывает как надо.

Выход из ситуации

Первое, что приходит в голову для того, чтобы решить эту проблему – это применить скругление углов не только для родителя, но и непосредственно к самой картинке. Причем, многие верстальщики поддерживают такую идею, я не раз натыкался на такое предложение в соответствующих форумах. Итак, записываем код:

Обращаю Ваше внимание на то, что содержимое блока требуется скруглять на 1 пиксель меньше, чтобы достичь полного единства рамки родителя и скругления потомка.

Еще одно решение

Второй способ, который, как показывает практика, является более действенным, заключается в помещении картинки на задний фон. То есть картинку мы будем выводить не посредством HTML-кода, а через CSS-правила, воспользовавшись свойством background. Однако следует отметить тот факт, что такой способ является хуже с точки зрения семантики, однако при отсутствии других более лучших вариантов выхода у нас нет.

Итак, вот код этого решения:

Теперь убедимся, что наш способ работает, пропускаем код через браузер

В каких браузерах работает?

Стоит отметить, что выход нового свойства в CSS3 значительно облегчил работу многим программистам. Однако, некоторые браузеры технически не были готовы к такому новшеству. Это выразилось в том, что одни из них некорректно осуществляли скругления, а другие не могли синхронизировать эффект между родителями и потомками. Но несмотря на это, с выходом новых версий браузеров постепенно разработчики исправили все свои недочеты, за что им отдельно спасибо. Сейчас в работе с border-radius не возникает практически никаких проблем.

Источник

Глюки при отрисовке border-radius в Windows 10

Совсем недавно тысячи желающих обновили свои PC на новую версию Windows — 10. Вроде как хорошо, система новая, и браузер Edge, который освободит разработчиков от большого количества проблем. Но сегодня с утра мне прислали замечательный скриншот одного из моих сайтов и я решил разобраться «что к чему».

Фото было вот такого вида:

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

Развернул Windows 10 в Virtualbox и увидел несколько другую, но не менее странную картинку…
Артефакт у верхнего левого угла меню и подложки под текстом.

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

Попутно нашел странные артефакты на логотипе в SVG:

К сожалению, под рукой не было PC-ноута, дома еще раз проверю все это на живом железе, но в Virtualbox удаление драйвера решило проблему и с SVG и с закруглениями. Что делать на реальном железе — видимо, ждать нормальных драйверов на видеокарту. Или установить их самостоятельно. Видимо драйверы от Windows 8 не подходят на 100%, а почти все обновлялись со старой системы. Чую, запросов от клиентов на эту тему прибавится в ближайшие дни.

После удаления драйвера:

И если кто-то сомневается, что это у меня такая верстка кривая — скрин twitter с этой же виртуальной машины:

UPD
Труп hasLayout, holy hack и прочее, как это называлось в стародавние времена восстал из мертвых!

На «железном» ноуте словил точно такой же глюк, как мне прислали. Видеокарта HD3000. Проблема излечилась удалением драйвера, но разрешение стало плохое и после перезагрузки он скачался снова. Сразу попробовал стародавний метод лечения — в лучших традициях средневековья:

И всё! Правда, сработало не на всех страницах…
Microsoft, как так?

Источник

Border не работает

Возникла проблема,свойство бордер не работает , подскажите что делаю не так.

Помощь в написании контрольных, курсовых и дипломных работ здесь.

Border не работает
CSS подключила, задала border цвет, но не отображается, я понимаю, что где-то маленькая ошибка, но.

Border-radius не работает
Есть сайт с html: .

Border-collapse не работает
Здравствуйте! В стилях, для таблицы указан коллапс, но сколлапсировались только

, а строки.

а где оно вообще у Вас прописано? Где именно не работает?

вот так для картинок бордер задаётся:

Не работает BORDER в таблице
Всем добрый день! Никак не могу решить следующую задачу. Есть таблица, в ней должна быть рамка и.

Border-image не работает
Подскажите почему может не работать на сайте border-image .dividerHeading h4 span< .

Не работает border-radius
Здравствуйте, не могу понять почему не работает border-radius.

border-bottom не работает
Здравствуйте! У меня почему-то не хочет отображать border-bottom, я его к чему хочешь применял.

Не работает border в Internet Explorer 7 и 8
Написал стандартную строчку кода в файле .css: border: 10px solid transparent;. Работает во всех.

Источник

Xiper

После того как большинство браузеров так или иначе стали поддерживать CSS3 свойство border-radius, многие верстальщики вдохнули с облегчением: наконец-то можно забыть о головной боли, связанной с простым дизайнерским решением — скругленные уголки.

Но как оказалось, реализация поддержки этого свойства браузерами пока оставляет желать лучшего: есть некоторые проблемы при использовании border-radius.

Webkit браузеры: отсутствие сглаживания

Chrome и Safari отображают скругление «рвано», нет сглаживания (антиалиасинга) скругления. Сравни скругление в Firefox и Chrome:

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

С этими багами пока ничего не поделать. Ждем исправлений от разработчиков браузеров.

В своих проектах вместе с заказчиком решаем, что важней: скорость загрузки и простота кода (используем border-radius), или же красота (делаем картинкой). Замечу, что отсутствие сглаживания не так бросается в глаза при небольших радиусах скругления.

Не скругляются изображения

Независимо от того border-radius применяется к самой картинке ( ) или к ее родителю:

А вот и результат:

Заметка

Изображения нормально скругляются в современных webkit-браузерах: Chrome 4+ и Safari 4+.

Решение 1

Народ в Сети советует пробовать дублировать border-radius для самой картинки:

При чем иногда имеет смысл задавать радиус картинке 1px меньше чем у контейнера. Прием вроде как иногда работает, но мне на простой тестовой странице этого добиться не удалось.

Решение 2

Не пытаться скруглять тег , а помещать картинку в background.

Как не трудно догадаться семантикой тут и не пахнет, но за то работает. Семантику можно улучшить несложными манипуляциями с кодом:

Недостаток данного способа — это избыточность HTML кода. Это можно побороть с помощью небольшого javascript кода:

Тут следует обратить внимание на то, что behavior из CSS для IE убрали и перенсли его в js. Это пришлось сделать для IE, который отрисовывал блок на VML до того, как ему присваивался background. Демо пример.

Выводы

Мы давно все ждали поддержки браузерами border-radius. В какой-то степени это время пришло. Только пока следует с осторожностью применять это свойство. Уверен, что мне встретились еще не все «сюрпризы».

Источник