<rmcreative>

RSS

Кроссбраузерный border-radius

7 января 2010

Одной из самых больных тем верстальщиков являются скругление уголков. В последнее время ситуация улучшается и браузеры потихоньку начинают поддерживать столь востребованные CSS-свойства. FF, Safari, Chrome делают это через свойства с своими особыми префиксами, Opera — скоро будет делать без префиксов. В стороне у нас стоит, как всегда, IE.

К счастью, IE можно довольно красиво победить его же средствами. Одно из понравившихся мне решений, использующее VML и behaviour — curved-corner. Для использования сливаем border-radius.htc, складываем рядом с CSS и используем следующий код:

.my-block {
  /* Для хороших браузеров */
  -moz-border-radius: 10px; /* Firefox */
  -webkit-border-radius: 10px; /* Safari, Chrome */
  -khtml-border-radius: 10px; /* KHTML */
  border-radius: 10px; /* CSS3 */
  /* Для плохих IE */
  behavior: url(border-radius.htc); /* учим IE border-radius */
}

Да, кстати, по соседству можно найти менее востребованный, но всё же полезный behaviour для box-shadow.

Демо

Комментарии RSS

  1. №2142
    Octane
    Octane 08.01.2010, 1:08:38

    border-radius.htc: line #60

    while ((typeof(el) != 'unknown')

    Вау! Без IE работа JavaScript-программиста не была бы настолько интересной :D Вот что за новый тип данных unknown в JScript!? Погуглив, нашел еще упоминания о типе unknown, значит это скорее всего не ошибка в border-radius.htc и как-то связано с VML-элементами, потому что для обычных узлов parentElement выдает null, в случае отсутствия родительского элемента.

  2. №2143
    ДимКа
    ДимКа 08.01.2010, 1:10:11

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

  3. №2145
    Dimox
    Dimox 08.01.2010, 10:44:49

    Просто супер! Я и не думал, что такое возможно. К тому же в IE углы выглядят идеально, без каких-либо артефактов. Спасибо за информацию!

  4. №2146
    Mikass
    Mikass 08.01.2010, 12:37:40

    А вот у меня работает только в FF и Chrome. Причем в последнем углы весьма побитые.

  5. №2148
    Dark Preacher
    Dark Preacher 08.01.2010, 19:37:42

    Хорошая вещь! Жаль, что некорректно работает с определениями радиусов типа "0 10px 10px 0", а то замены ему не было бы!

  6. №2152
    Артём
    Артём 09.01.2010, 1:43:09

    А как же Опера? Даже 10ка не поддерживает border-radius.

  7. №2157
    Sam
    Sam 09.01.2010, 21:04:13

    Opera скоро подтянется. Уже сейчас можно поставить вполне сносную тестовую версию, которая это умеет.

  8. №2172
    Dreamer
    Dreamer 14.01.2010, 17:58:51

    Есть еще такое решение - http://code.google.com/p/rocon/

    Демо - http://chikuyonok.ru/playground/rocon/

  9. №2173
    Sam
    Sam 16.01.2010, 1:41:41

    О rocon знаю. У меня он себя плохо повёл, но вообще очень неплохое решение.

  10. №2184
    Wordpresser
    Wordpresser 19.01.2010, 8:23:29

    В rocon есть свои нюансы, у меня например перестал margin между блоками работать, в ie у блоков с скругленными углами, а вообще вещь интересная.

    В Opera начиная с 10.50 будет свойство для скругления углов.

  11. №2185
    art
    art 20.01.2010, 6:59:32

    а я как-то

    -moz-border-radius: 10px; /* Firefox */

    -webkit-border-radius: 10px; /* Safari, Chrome */

    -khtml-border-radius: 10px; /* KHTML */

    за кошерный способ не считаю. перебор свойств под каждый браузер — не моя мечта (:

  12. №2385
    YoYurec
    YoYurec 09.03.2010, 18:57:14

    rocon неплох, хотя бывает капризным с IE ((( всё жду от автора обновление до 2.0

    стоит на каком-то проекте поганять этот .htc, спасибо!

  13. №3048
    Levik
    Levik 04.09.2010, 10:21:54

    спасибо за наводку. Однако, все-таки пока нет "нормального" решения (пользователи IE все же видят границы с уголками), наверное, лучше "по старинке" )

  14. №3049
    Levik
    Levik 04.09.2010, 10:51:10

    ссылки в правом меню на этом сайте тоже сначала "угловатые", через долю секунды - скругляются :)

  15. №3173
    Александр
    Александр 04.10.2010, 21:44:10

    Очень интересное решение, но у меня не получается. У мня на сайте использовал этот хак, на странице "Обо мне", блок описания во всех арбузах со скругленными углами, в ИЕ7 углы как были так и остались. Файл (border-radius.htc) закинул в корень сайта.

    CSS: .rounded10 { -moz-border-radius:10px; -webkit-border-radius:10px; border-radius:10px; -khtml-border-radius:10px; behavior: url(border-radius.htc); }

  16. №3174
    Sam
    Sam 04.10.2010, 23:05:29

    Попробуйте закинуть в /skin/alex/.

  17. №3259
    Гость
    Гость 20.10.2010, 20:05:03

    была такая же тема, пока не объяснили что границу все же придется объявить добавь border: 1px solid #[цвет фона блока];

  18. №3271
    Александр
    Александр 22.10.2010, 15:35:30

    **Гость 20.10.2010 20:05:03

    была такая же тема, пока не объяснили что границу все же придется объявить добавь border: 1px solid #[цвет фона блока];**

    У меня указана граница.

    Sam, там тоже есть border-radius.htc, но проблема осталась почему та. Пока никак не победил эту каку...

  19. №3313
    Максим
    Максим 28.10.2010, 18:26:01

    Такая же проблема, все выше сказаное выполнил, а рамка не закруглилась.

  20. не работает в восьмом ишаке файл border-radius.htc лежит в той же папке, где и html, из которого я привел цитату выше.

  21. №3397
    Роман
    Роман 16.11.2010, 14:21:22

    Если border-radius.htc применяется к блоку со свойством display:none, то вылезает js-ошибка (((

  22. №3547
    TranceSmile
    TranceSmile 12.12.2010, 15:42:30

    Sam, отличная статья. Спасибо. Кстати в google.com по запросу border-radius в IE 2 место. P.S. Это Romantic из форума SamLab

  23. №3549
    Mata
    Mata 13.12.2010, 21:27:48

    у меня не работает, подскажите, пожалуйста, что еще надо сделать, кроме того, как скачать border-radius.htc положить его в папку с css, в самом css описать класс my-block и задать диву рамку?

  24. №3551
    Sam
    Sam 14.12.2010, 3:11:41

    Ещё нужно behavior подключить:

    behavior: url(border-radius.htc); /* учим IE border-radius */
  25. №3553
    Александр
    Александр 14.12.2010, 7:44:27

    Ну вот, вроде сейчас заработало, ie 7 закругляет углы, но с какими то косяками

  26. №3554
    Mata
    Mata 14.12.2010, 9:49:08

    Ещё нужно behavior подключить:

    behavior: url(border-radius.htc); /* учим IE border-radius */

    Ну да, я скопировала целиком класс my-block

  27. №3558
    Sam
    Sam 14.12.2010, 16:54:54
    1. border-radius.htc лежит в той же папке, что и CSS?
    2. Случаем не локальный файлик? Если да — не заработает без шаманства с настройками IE.
  28. №3748
    Николай
    Николай 16.01.2011, 19:56:46

    behavior: url(border-radius.htc); - это не работает, если есть фоновые картинки; как это можно исправить?

  29. №3750
    Sam
    Sam 16.01.2011, 20:44:57

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

  30. №3827
    Александр
    Александр 29.01.2011, 12:30:13

    Sam, пирожок мне нравится больше, попробую это другое решение. А с бордер-радиусом.htc уже намучился...

  31. №3841
    art
    art 01.02.2011, 22:44:55

    похоже не канает для ie, когда указаны разные радиусы углов. например, 5px 5px 0 0 - ie делает все углы одинаково закругленными

  32. №3890
    creativo
    creativo 11.02.2011, 9:03:38

    Работает, единственное нужно разобраться с путем,пришлось бросить в корневую папку сайта,результат просмотреть можно только на реальном сервере(а не на денвере).

  33. №3913
    Алексей
    Алексей 14.02.2011, 10:54:07

    Мой опыт — файлик нужно бросать не в папку со стилями, а в папку, где html-код нахдится. Лучше, чтобы стили были в хедере.

  34. №3923
    Александр
    Александр 15.02.2011, 20:11:04

    Алексей, у мня всё

    PHP

    выводит. Попросту нету

    HTML

    страниц, тока скрипты

  35. №3930
    Виктор
    Виктор 16.02.2011, 23:40:48

    Здравствуйте, как бы разобраться с тем что если блок резиновый то в ИЕ он не тянется или не уменьшается или тока у меня так? в ФФ, хорм всё гуд.

  36. №3987
    Дмитрий
    Дмитрий 02.03.2011, 20:48:58

    О! у меня получилось с закруглеными!!

  37. №3988
    Макс
    Макс 02.03.2011, 23:55:19

    "2. Случаем не локальный файлик? Если да — не заработает без шаманства с настройками IE."

    а если локальный, какие настройки надо изменить?подскажи пожалуйста

  38. №4272
    dvcarrot
    dvcarrot 03.04.2011, 12:40:22

    Возрадуйтесь! http://css3pie.com/

  39. №4420
    Дмитрий
    Дмитрий 17.04.2011, 21:18:46

    C IE вечно одни проблемы! Благо уже научились бороться и подстраиваться под них.

  40. №4462
    anton
    anton 20.04.2011, 9:31:45

    А у меня, например, за hover не работает

    #menu a { background:#0066cc; color:#ffffff; text-decoration:none; border:0px; border-radius:5px; behavior:url(border-radius.htc);}

    работает, а

    #menu a:hover   { background:#0066cc; color:#ffffff; text-decoration:none; border:0px; border-radius:5px; behavior:url(border-radius.htc);}

    не работает

  41. №4697
    Crimeadesign
    Crimeadesign 22.05.2011, 0:39:42

    Блин, спасибо за пост, всегда забываю как для всех браузеров это делается!

  42. №4698
    t4t54t54
    t4t54t54 22.05.2011, 2:31:20

    border-radius итак кроссбраузерный для ВСЕХ современных браузеров! http://htmlbook.ru/css/border-radius зачем что-то ещё изобретать?

  43. №4699
    Sam
    Sam 22.05.2011, 15:47:00

    t4t54t54, IE.

  44. №4765
    cyberkatze
    cyberkatze 29.05.2011, 16:14:51

    t4t54t54

    border-radius итак кроссбраузерный для ВСЕХ современных браузеров!

    да... но только не у осликов до 9й версии... поэтому и приходиится подстраиваться под мелкософт(((

    благо в 9й версии уже хоть чтото работает )))

  45. №4801
    panoptus
    panoptus 06.06.2011, 3:24:51

    Если бы все ослики взяли и самообновились до 9-й версии - было бы ничего. А лучше бы они самоудалились))

    А остальным можно уже сейчас указывать border-radius и не париться, все они всегда сами следать за "версией себя" :)

  46. №4909
    Alexis
    Alexis 03.07.2011, 21:15:54

    to Anton

    А у меня, например, за hover не работает

    У этой приблуды проблемы с hover.

    a {behavior:url(border-radius.htc);}

    то реакции не будет на

    a:hover {background-color:black}

    border работает на половину, толщина имеет место а цвета нет.

  47. №4910
    Alexis
    Alexis 03.07.2011, 21:18:05

    css3pie Такое решение тоже не очень =( Памяти жуёт много.

  48. №4914
    cyberkatze
    cyberkatze 05.07.2011, 14:58:45

    если мне не изменяет память, то в ИЕ в ховэр-эффекте и так будет фон #000... хотя может и ошибаюсь... попробуй прописать behavior:url(border-radius.htc); в самом a:hover{}

  49. №5089
    юзєр
    юзєр 01.08.2011, 13:32:32

    ага щеб працювало - ціни не було Б !

  50. №5199
    Вадим
    Вадим 16.08.2011, 23:57:19

    кому интересно, чтобы работало в 9-м IE и выше, в

    надо добавить
  51. №5200
    Вадим
    Вадим 16.08.2011, 23:58:38
    <meta http-equiv="X-UA-Compatible" content="IE=9" />
    
  52. №5491
    Евген
    Евген 11.10.2011, 21:33:54

    Сначала обрадовался, думал реально хорошее решение, а когда загрузил файлы на сервер вся радость пропала. )) Вообще не работает в IE 7 и 8, куда не скопируй этот файл, хоть вместе с css, хоть куда. В общем не советую. ))

  53. №5557
    Игорь
    Игорь 28.10.2011, 21:01:03

    чтото у меня становится прозрачным рамка и фон ?:(

  54. №5684
    WildCat
    WildCat 16.12.2011, 3:32:31

    Углы не скругляются в IE 6-8, хоть ты тресни :(

  55. №5758
    Grabowski
    Grabowski 16.01.2012, 13:07:32

    А от чёрного фона как-то можно избавиться? Если я в CSS специально прописываю фон для этого элемента, то в IE этот фон накладывается поверх рамок. :(

  56. №5759
    CyberK
    CyberK 16.01.2012, 15:33:44

    для_Grabowski

    вот мой пример (проверено на IE7 & IE8, для 9-ки хватает border-radius, должно работать!!!): http://juhu.comuf.com/test/1.php

    как следствие для ослика надо!!!: 1. чтобы файлик (border-radius.htc) находился в директории где будет сама страница, либо в нем прописать абсолютный путь к border-radius.htc 2. для ослика можно либо через хаки, дибо условные комментарии добавить:

    <!--[if IE]>
    <style type="text/css">
    #border1 {
      background:#fff;
    }

    в данном случае фон белый. Транспарент в данном случае не применим и не работает!!! поэтому только ручное присвоение типа фона для элемента который очерняется в IE!

  57. №5762
    Grabowski
    Grabowski 18.01.2012, 13:17:24

    Да, CyberK, спасибо.

  58. №6071
    УтБ
    УтБ 26.03.2012, 8:22:29

    по тестил не работает для fieldset :)

  59. №6221
    Isis
    Isis 16.05.2012, 15:24:49

    У кого не пашет, добавьте position:relative;

  60. №6572
    Dez
    Dez 14.08.2012, 12:08:53

    В IE8 и ниже при наведении не работает ни в какую! Хоть ты тресни, но не заработает с данным способом!

  61. №7487
    Максим
    Максим 06.02.2013, 12:04:56

    Вот тут очень неплохой генератор скругленных углов!

  62. №7949
    Дмитрий
    Дмитрий 12.05.2013, 10:12:43

    Максим, спасибо, то, что нужно. Я про сервис www.border-radius.ru/

  63. №8242
    Виктор
    Виктор 05.08.2013, 12:06:30

    Народ у кого не получается...

    1. Качаем PIE.htc из нэта.
    2. Добавляем этот файлик не в css папку, а в корневую, там, где index.html.
    3. Но в css как ни странно должен быть такой путь:
    .our{
        border-radius: 50%;
        behavior:url(PIE.htc);
    }

    Надеюсь помог

  64. №8688
    Рустам
    Рустам 11.12.2013, 0:32:55

    Виктор, браво!!! Все решилось.

  65. №8991
    wlaws
    wlaws 27.04.2014, 13:30:58

    Молотца!

  66. №9014
    Сергей
    Сергей 15.05.2014, 14:49:17

    Небольшие 5 копеек по теме: Генератор border-radius

  67. №9015
    wdtime
    wdtime 16.05.2014, 1:14:50

    Подробно о border-radius css

  68. №9023
    wdtime
    wdtime 27.05.2014, 13:21:31

    Читайте также: box-shadow css

  69. №9103
    Александр
    Александр 15.07.2014, 20:48:30

    Кому нужно вот мой генератор border-radius, писал для себя когда-то.

  1. Почта опубликована не будет.

  2. Можно использовать синтаксис Markdown или HTML.

  3. Введите ответ в поле. Щёлкните, чтобы получить другую задачу.