Кроссбраузерность border radius: Кроссбраузерный border-radius — RMCreative – Кроссбраузерные CSS / Habr

Демонстрация свойства border-radius / Habr

Нет-нет, я не буду вам показывать простые закруглённые прямоугольники, которые порядком приелись. Но те же самые простые закруглённые прямоугольники могут складываться во вполне осмысленные фигуры. У меня они сложились в слово «twitter».

Работает только в браузерах на движках Gecko и Webkit.

Выглядит так:

А вот так на других, не так симпатично, но читабельно:

Но перед тем как показывать кусок вёрстки, виновницы этой записи, хочу пожаловаться общественности на поведение браузеров, которое нельзя назвать достойным.

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

Я вполне понимаю, что CSS3 ещё не оформлено должным образом, и ругать браузеры за то, что они как хотят, так и вертят вызовом свойства border-radius, ну понятное дело, речь о -moz- и -webkit-. Ну а атрибуты свойства — так и вовсе рознятся, но тут всё более серьёзно упирается в неготовность спецификации CSS3.

И вот что непонятно, почему такая прогрессивная Opera не научила свой движок рендерить border-radius? Или я плохо искал, и что-то пропустил? Даже 10beta не рендерит — чем меня сильно расстроила.

Как вы думаете, стоит ли использовать некритичные для пользователей прелести CSS3, игнорируя тех, кто сидит на других браузерах, естественно, не в ущерб функционалу?

Ладно, хватит о теории, перейдём к практике. Пару дней назад, отдыхая с коллегой у него дома, и откровенно сказать, маясь со скуки, решили убить время тем. что бы наверстать слово «twitter», естественно используя border-radius.

Код можно ещё долго оптимизировать, уменьшить количество слоёв, почистить и оптимизировать стили, и так далее, и тому подобное + выстроить код и стили логично. Кстати, если извратиться, то можно сделать и кроссбраузерную версию этой верстки, но это на любителя, у меня такой цели не было. Тем более, это в разы усложнит вёрстку, или, если пойти иным путём, будет подвешивать нежные IE6 на скромных, по мощности, компьютерах.

Ну ещё. из общих проблем, есть проблемы с масштабированием, причём всё равно, в каких величинах верстать. Если будет время — решу проблему.

Ну а в действии посмотреть вы можете на этой странице — http://absolvo.ru/tmp/18/ — там и код, и стили — ну всё что надо в общем.

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

Исправляем отрисовку border-radius

Опубликовано:

2011-08-20

Проблема

В браузерах, отличных от Firefox, существуют проблемы в отрисовке блоков с border-radius.

1. Если блоку заданы одновременно фон и рамка, то снаружи закруглённых углов виден призрачный однопиксельный ореол фонового цвета. Особенно заметно это в случаях, когда цвета фона блока, его рамки и фона родительского блока сильно различаются. До недавних пор это проявлялось в Chrome, Opera и IE9, сейчас — в Opera (11.5) и IE9:

   

2. Если рамка имеет разные цвета для разных сторон блока, то в Chrome 13 и IE9 на стыке разных частей рамки также видна однопиксельная линия фонового цвета:

   

3. В Chrome 13 при больших толщине рамки и радиусе закругления внутренний периметр закруглённой рамки отрисовывается грубой, почти ломаной линией:

   

CSS-код, иллюстрирующий проблему:

.buggy {
    background: #fff;
    border: 70px solid #000;
    border-radius: 100px;
    height: 60px;
}

Решение

Эти проблемы можно обойти, заменив блок на два, вложенных друг в друга, задав нужный фоновый цвет в качестве фона внутреннего блока, цвет рамки — в качестве фона внешнего блока, и задав для внешнего блока внутренний отступ (padding), равный нужной толщине рамки.

HTML:

<div><div>…</div></div>

CSS:

.ok {
    background: #000; /* Цвет рамки */
    border-radius: 100px;
    padding: 70px; /* Толщина рамки */
}

.ok > DIV {
    background: #fff; /* Цвет фона */

    border-radius: 30px; /* Радиус закругления внешнего блока минус толщина рамки */
    height: 60px; /* Для наглядности */
}

Если по дизайну рамка должна иметь разные цвета для разных сторон блока, то вместо padding для внешнего блока можно задать непосредственно рамку. При этом возможный зазор между внутренним блоком и рамкой внешнего блока можно замаскировать, частично надвинув внутренний блок на рамку внешнего при помощи отрицательного поля (margin) в 1-2 пиксела с параллельным увеличением толщины рамки (border-width) внешнего блока на эту же величину с целью компенсации сдвига.

Демо-страница

См. также авторский генератор border-radius со встроенной возможностью обойти описанные нюансы рендеринга скруглённых углов.

---

Создаем закруглённые уголки с помощью CSS 3

Одно из наиболее ожидаемых свойств CSS3, несомненно, свойство border-radius. С помощью свойства border-radius

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

Кроссбраузерная совместимость.

К сожалению, CSS3 еще не поддерживается всеми браузерами. Свойство border-radius поддерживается Firefox (начиная с версии 3.0), Safari (с версии 3.1) и Chrome (с самой первой версии), но оно не поддерживается Internet Explorer и Opera (будет реализовано в Opera 10).

Так как CSS3 еще не является стандартом, Вы должны добавлять префикс для свойства border-radius чтобы оно работало в браузерах, которые его поддерживают. Если Вы хотите, чтобы оно работало в Firefox необходимо написать в стилях  -moz-border-radius, для Safari/Chrome это свойство будет иметь такой вид — -webkit-border-radius.

Имейте ввиду, что, хотя Firefox, Сафари и Хром поддерживают это свойство, они реализуют его немного различными методами.  Я сначала покажу Вам, как оно реализовано Firefox и затем объясню различия в Safari и Chrome.

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

<body>
<div></div>
</body>

В CSS зададим для него высоту, ширину и цвет фона:

#box {
 width:590px;
 height:100px;
 background-color:#6B86A6; }
 

Добавляем свойство border-radius:

Свойство border-radius объявляется подобно свойствам margin и padding. Вы можете использовать как краткую запись этого свойства для всех четырёх углов прямоугольника, так и отдельно для каждого угла. При краткой записи указывается одно значение для каждого угла:

#box {
-moz-border-radius: 20px;
}

Теперь все четыре угла будут иметь радиус 20px:

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

#box {
-moz-border-radius:20px 40px;
}

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

#box {
-moz-border-radius:10px 20px 30px 40px;
}
 

Объявляем свойство border-radius для каждого угла

Если вы хотите использовать это свойство только для одного угла, то достаточно добавить соответствующее окончание к свойству:

• -moz-border-radius-topleft для верхнего левого угла;
• -moz-border-radius-topright для верхнего правго угла;
• -moz-border-radius-bottomright для нижнего правого угла;
• -moz-border-radius-bottomleft для нижнего левого угла;

Горизонтальный и вертикальный радиус

Это свойство можно также использовать для создания углов в виде четверти эллипса. Для этого необходимо добавить второе значение для нужного угла:

#box {

-moz-border-radius-topleft: 30px 15px;
}
 

Как Вы можете видеть на картинке верхний левый угол имеет немного «скошенный» вид. Это потому что эти два значения определяют горизонтальный и вертикальный радиус соответственно. Когда используется одно значение браузер интерпретирует его как для горизонтального, так и для вертикального радиуса.

При краткой записи этого свойства значения для горизонтального и вертикального радиуса разделяются слэшем:

#box {
-moz-border-radius: 30px / 15px;
}

#box {
-moz-border-radius: 10px 20px 30px 40px / 5px 10px 15px 20px;
}

Использование свойства border-radius в Safari и Chrome.

Safari и Chrome используют немного другой синтаксис, основным отличием является использование префикса -webkit, вместо -moz:

• -webkit-border-top-left-radius для верхнего левого угла;
• -webkit-border-top-right-radius для верхнего правого угла;
• -webkit-border-bottom-right-radius для нижнего правого угла;
• -webkit-border-bottom-left-radius для нижнего левого угла;

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

Этот код не будет работать в Safari и Chrome:

#box {
-webkit-border-radius: 10px 20px 30px 40px;
}
 

Правильный код будет выглядеть так:

#box {
 -webkit-border-top-left-radius: 10px;    
-webkit-border-top-right-radius: 20px;    
-webkit-border-bottom-right-radius: 30px;    
-webkit-border-bottom-left-radius: 40px;
}

Горизонтальный и вертикальный радиус в Safari и Chrome.

В Safari и Chrome можно также указывать горизонтальный и вертикальный радиус:

#box {
-webkit-border-top-left-radius: 30px 15px;
}

При краткой записи можно указывать горизонтальный и вертикальный радиус для всех углов прямоугольника

только если эти значения одинаковые для каждого угла. Также не требуется использование слэша:

#box {
-webkit-border-radius: 30px 15px;
}

Примеры.

Источник

Если у Вас возникли вопросы, то для скорейшего получения ответа рекомендуем воспользоваться нашим форумом

border-top-right-radius | CSS | WebReference

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

Краткая информация

Значение по умолчанию	0
Наследуется	Нет
Применяется	Ко всем элементам
Анимируется	Да

Синтаксис ?

border-top-right-radius: [<размер>| <проценты>] [<размер> | <проценты>]

Обозначения

	Описание	Пример
<тип>	Указывает тип значения.	<размер>
A && B	Значения должны выводиться в указанном порядке.	<размер> && <цвет>
A | B	Указывает, что надо выбрать только одно значение из предложенных (A или B).	normal | small-caps
A || B	Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке.	width || count
[ ]	Группирует значения.	[ crop || cross ]
*	Повторять ноль или больше раз.	[,<время>]*
+	Повторять один или больше раз.	<число>+
?	Указанный тип, слово или группа не является обязательным.	inset?
{A, B}	Повторять не менее A, но не более B раз.	<радиус>{1,4}
#	Повторять один или больше раз через запятую.	<время>#

×

Значения

В качестве радиуса указывается любое допустимое в CSS значение (px, cm, in, em и др.), а также проценты, в этом случае радиус скругления считается от ширины блока.

Необязательное второе значение предназначено для создания эллиптического уголка, первое значение при этом устанавливает радиус по горизонтали, а второе — радиус по вертикали (рис. 1).

Рис. 1. Радиус скругления для создания разных типов уголков

Песочница

Винни-Пух был всегда не прочь немного подкрепиться, в особенности часов в одиннадцать утра, потому что в это время завтрак уже давно окончился, а обед ещё и не думал начинаться. И, конечно, он страшно обрадовался, увидев, что Кролик достаёт чашки и тарелки.

Пример

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>border-top-right-radius</title>
  <style>
   .radius {
    background: #f0f0f0;
    border: 1px dashed #000;
    padding: 15px;
    margin-bottom: 10px;
   }
  </style>
 </head> 
 <body> 
  <div>
   border-top-right-radius: 10px
  </div>
  <div>
   border-top-right-radius: 70px 40px
  </div>
 </body> 
</html> 

Результат данного примера показан на рис. 2.

Рис. 2. Радиус скругления

Объектная модель

Объект.style.borderTopRightRadius

Примечание

Firefox до версии 4 использует свойство -moz-border-radius-topright.

Chrome до версии 4, Safari до версии 5 и Android до версии 2.1 используют свойство -webkit-border-top-right-radius.

Спецификация ?

Спецификация

Каждая спецификация проходит несколько стадий одобрения.

• Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
• Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
• Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
• Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
• Editor’s draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
• Draft (Черновик спецификации) — первая черновая версия стандарта.

×

Браузеры ?

Базовый синтаксис	9	12	1	4	10.5	3	5	1	4
Проценты	9	12	4		10.5	5		4
Эллиптические уголки	9	12	1		10.5	3		3.5

Базовый синтаксис	1	2.1	1	4	10.5	3	5
Проценты	2.1		4		10.5	5
Эллиптические уголки	2.1		3.5		10.5	3

Браузеры

В таблице браузеров применяются следующие обозначения.

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

Число указывает версию браузера, начиная с которой свойство поддерживается.

×

Автор и редакторы

Автор: Влад Мержевич

Последнее изменение: 05.09.2017

Редакторы: Влад Мержевич