border-top-right-radius в CSS


border-top-right-radius

Свойство CSS border-top-right-radius используется для скругления верхнего правого угла фона элемента. Если имеется рамка элемента, то она тоже скругляется. Важно понимать, что форма самого элемента в любом случае остается прямоугольной.

Для скругления сразу всех углов элемента можно использовать свойство border-radius.

Тип свойства

Применяется: ко всем элементам.

Значения

Значением свойства border-top-right-radius является одна или две (разделенных пробелом) величины указывающие радиус скругления. Две величины используются для создания овальных (эллиптических) скруглений, где первая отвечает за радиус по горизонтали (ось X), а вторая — по вертикали (ось Y). Допустимые значения:

  • Проценты — значения в процентах (%), где за 100% берется ширина или высота элемента с учетом внутренних отступов (padding) и рамки (border). Отрицательные значения (-20%) указывать нельзя.
  • Размеры — относительные или абсолютные величины в единицах измерения принятых в CSS, например: пиксели (px), пункты (pt), сантиметры (cm) и т.д. Для них тоже недопустимы отрицательные значения.

Процентная запись: относительно ширины или высоты элемента (в зависимости от места использования) с учетом размеров рамки и внутренних отступов.

Значение по умолчанию: 0.

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

Обратите внимание, что координаты отсчитываются от внешнего края рамки.

Синтаксис

Пример CSS: использование border-top-right-radius

Результат. Использование свойства CSS border-top-right-radius в браузере Opera.

Версии CSS

Версия: CSS 1 CSS 2 CSS 2.1 CSS 3
Поддержка: Нет Нет Нет Да

Браузеры

Браузер: Internet Explorer Google Chrome Mozilla Firefox Opera Safari
Версия: До 9.0 9.0 и выше До 4.0 От 4.0 до 7.0 7.0 и выше До 4.0 4.0 и выше До 10.5 10.5 и выше До 5.0 5.0 и выше
Поддержка: Нет Да Нет Частично Да Нет Да Нет Да Нет Частично

Google Chrome до версии 7.0 и Safari с версии 5.0 не понимают процентные значения border-top-right-radius .

CSS :: Свойство border-top-right-radius

css -свойство border-top-right-radius (от англ. border top right radius – верхний правый радиус границы) используется для скругления верхнего правого угла элемента. При этом border-top-right-radius срабатывает и при отсутствии границ, в этом случае происходит скругление фона элемента.

Характеристики

  • Значение по умолчанию: 0 .
  • Применяется: ко всем элементам , за исключением таблиц с border-collapse: collapse .
  • Наследуется: нет .
  • Анимируется: да .
  • JavaScript: object.style.borderTopRightRadius=»value» .

Синтаксис

Значения

Любые доступные в CSS единицы измерения (смотреть), а также проценты, отсчет которых производится относительно ширины блока.

Если подразумевается сгругление границ по эллипсу, свойству следует передавать через пробел сразу два радиуса.

CSS | Свойство border-top-right-radius

Свойство border-top-right-radius в CSS используется для определения радиуса правого верхнего угла границы данного элемента. Граница верхний правый радиус используется для рисования закругленного угла в правой верхней части контейнера. Параметр border-radius используется для одновременной установки всех углов радиуса контейнера с одинаковым значением радиуса, а border-top-right-radius специально устанавливает верхнюю правую границу.

Синтаксис:

Значение свойства: значения свойства border-bottom-right-radius перечислены ниже:

  • длина: Используется для указания радиуса правого верхнего угла фиксированной длины в пикселях, em и т. д. Значение по умолчанию — 0.
  • процент%: используется для указания радиуса правого верхнего угла границы в процентах.
  • initial: используется для установки для свойства border-top-right-radius значения по умолчанию.
  • наследовать: это свойство наследуется от его родительского элемента.

CSS свойство border-top-right-radius

CSS свойство border-top-right-radius устанавливает скругленную форму правого верхнего угла элемента. Возможны три типа скругления: круг или эллипс, или значение 0, при котором угол будет квадратным. При использовании фонового изображения или цвета, фон также будет срезан указанным радиусом границы. Этот процесс устанавливается значением свойства background-clip.

CSS свойство border-top-right-radius имеет две значения: длина и процент. Свойство border-top-right-radius указывает на горизонтальный и вертикальный радиус, который устанавливает скругленный правый верхний угол для границы блока.

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

Процент для горизонтального радиуса указывает на толщину блока, а процент для вертикального радиуса — на высоту блока. Отрицательные значения недопустимы.

Значение по умолчанию
Применяется Ко всем элементам, а также к ::first-letter .
Наследуется Нет
Анимируемое Да. Правая верхняя граница анимируема.
Версия CSS3
DOM синтаксис object.style.borderTopRightRadius = «25px»;

Синтаксис

Рассмотрим пример, где использовано только одно значение. Оно устанавливает верхнюю и правую границу эллипса.

Пример

Рассмотрим другой пример, где использованы две значения. Первое из них устанавливает верхнюю границу эллипса, а второе — правую границу эллипса.

border-top-right-radius

The border-top-right-radius property is used to round the top right corner of an element.

The property takes in one or two values that define the radii of a quarter ellipse that defines the shape of the corner of the outer border edge (see the diagram below). The first value is the horizontal radius, the second the vertical radius. If the second value is omitted it is copied from the first. If either length is zero, the corner is square, not rounded. Percentages for the horizontal radius refer to the width of the border box, whereas percentages for the vertical radius refer to the height of the border box. Negative values are not allowed.

The two values of border-top-right-radius: 55pt 25pt define the curvature of the corner.

Илон Маск рекомендует:  Kylix обзор kylix (delphi для linux)

The curvature of the corner does not have to be perfectly circular. When only one value is specified and the other is copied from the one that is specified, the result will be a circular curve; i.e, an arc of a circle is used as a border.

Two equal radii will result in a circular curvature.

But when two values are specified and they are not equal, the result is an elliptical curve; i.e, an arc of an ellipse is used as a border.

Two non-equal radii will result in an elliptical curvature.

Trivia & Notes

If the element has a background color or a background image, the background will also be clipped to the border radius specified.

The element’s background image is clipped to the specified border radius.

However, sometimes the background color of an element may “leak” outside the curvature of the border when it is rounded. To fix that, you can use the background-clip property and set its value to padding-box .

If an element has a border image, the border image is not clipped to the curve of the rounded corners.

The content of the element may overflow the element on the corners that are rounded if the element does not have enough padding to “push” the content inwards. (See image below)

The element’s content may overflow it where the corners are rounded if it has no padding.

This example adds appropriate padding, so that the contents do not overflow the corners. Note that there is no border, but the background will still have rounded corners.

Also, The area outside the curve of the border edge does not accept pointer events on behalf of the element.

Official Syntax

  • Syntax:
  • Initial: 0
  • Applies To: all elements (but browsers are not required to apply to table and inline-table elements when border-collapse is collapse . The behavior on internal table elements is undefined for the moment.)
  • Animatable: yes, as two values of length, percentage, or calc(); when both values are lengths, they are interpolated as lengths; when both values are percentages, they are interpolated as percentages; otherwise, both values are converted into a calc() function that is the sum of a length and a percentage (each possibly zero), and these calc() functions have each half interpolated as real numbers.
  • Values

    The unofficial syntax looks like this:

    Each of the radii can be a or

    Percentages for the horizontal radius refer to the width of the border box, whereas percentages for the vertical radius refer to the height of the border box. Negative values are not allowed.

    The question mark (?) indicates that the second radius’ value is optional. If it is omitted, it is copied from the first one.

    entry for a list of possible values. See the entry for a list of possible values.

    Все о свойстве border

    Основы

    Всем знакомо такое использование:

    Это однопиксельная сплошная рамка. Немного меняем синтаксис:

    Например у параметра border-width есть три параметра: thin, medium, thick:

    Если необходимо менять цвет границы при наведении на объект:

    Но так это реализовать проще и правильнее:

    Border-Radius

    border-radius — это новый параметр CSS3 для отображения закругленных углов, который корректно работает во всех современных браузерах, за исключением Internet Explorer 8 (и более старых версий).

    Для каждого угла можно назначить свое закругление:

    В приведенном примере необязательно назначать «0» border-top-right-radius и border-bottom-left-radius, если они не наследуют значения, которые должны быть изменены.
    Всю конструкцию можно сжать в одну строку:

    А вот как можно нарисовать лимон средствами CSS:

    Здесь описаны самые простые и популярные примеры применения параметра border. Перейдем к более сложным.

    Несколько границ

    Border-Style

    solid, dashed, and dotted — самые популярные значения параметра border-style, но давайте рассмотрим другие, например, groove and ridge.

    Или более подробно:

    Outline

    Самый популярный способ создания двойной границы — это параметр outline:

    Этот способ отлично работает, но ограничен созданием двойной рамки. Если вам необходимо отобразить несколько границ элемента, то необходимо использовать другую технику.

    Псевдоэлементы

    Можно использовать такую конструкцию:

    Возможно это не самое элегантное решение, однако оно работает

    Box-Shadow

    Еще один способ, с применением теней:

    Изменение углов

    К параметру border-radius можно применять два значения, используя «/», например:

    Это то же самое, что:

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

    CSS фигуры

    В следующих примерах предполагается такая разметка:

    И такой базовый css:

    Наиболее частым примером использования CSS фигур является отображение стрелок. Чтобы понять, как это работает, необходимо разобраться с использованием отдельного border-color для каждой стороны и установкой значения «0» для width и height:

    Или то же самое:

    А теперь оставляем только синий треугольник:

    Создание Speech Bubble

    Наша базовая разметка:

    Теперь нужно расположить стрелку-треугольник в нужном месте. Вот наш цветной квадратик:

    Оставляем только четверть квадратика:

    Теперь перемещаем ниже и закрашиваем:

    Вертикальное центрирование текста

    минус использования line-height при вертикальном центрировании в ограничении текста одной строкой. Для решения этой проблемы, можно применить display: table к нашему Speech Bubble и display: table-cell к тексту:

    Еще один пример нестандартного использования границ:

    CSS3 border-top-right-radius Property

    Description

    The border-top-right-radius property sets the rounded shape for the ‘top-right’ corner of an element border box.

    The following table summarizes the usages context and the version history of this property.

    Default value:
    Applies to: All elements
    Inherited: No
    Animatable: Yes. See animatable properties.
    Version: New in CSS3

    Note: The border-top-right-radius property causes the element’s background to be rounded even if no borders have been defined or its value is set to none .

    Илон Маск рекомендует:  Вывод tooltip (всплывающей подсказки) в любом месте экрана

    Syntax

    The syntax of the property is given with:

    [ length | percentage ] 1 or 2 values | initial | inherit

    This shorthand notation can take one, or two whitespace separated values.

    • The optional second length values define the vertical radii for the top-right corner and the corner shape is thus a quarter ellipse.
    • If the second length is omitted, or it is equal to the first – the corner shape is a quarter circle. If either length is zero, the corner is square, not rounded.

    The example below shows the border-top-right-radius property in action.

    Example

    • div <
    • border : 2px solid #f08080 ;
    • border-top-right-radius : 20px ;
    • >

    Property Values

    The following table describes the values of this property.

    Value Description
    length A length value in px , pt , cm , em , etc. Negative values are not allowed.
    percentage The size of the radius in percentage. In case of two values, percentage for the first value (i.e. horizontal radius) is calculated with respect to the width of the element’s box, while percentage for the second value (i.e. vertical radius) is calculated with respect to the height of the element’s box. Negative values are not allowed.
    initial Sets this property to its default value.
    inherit If specified, the associated element takes the computed value of its parent element border-top-right-radius property.

    Browser Compatibility

    The border-top-right-radius property is supported in all major modern browsers.

    Border-top-right-radius в CSS

    Замечательное свойство CSS3 border-raduis позволяет легко создавать закруглённые углы без использования изображений или лишних div тэгов. Это одно из полезнейших и обсуждаемых CSS3 свойств.

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

    Приведу простой пример:

    В теории, код для данного примера очень простой:

    Однако, не всё так просто. Для совместимости с Firefox, нужно использовать префикс -moz- (об этом читай секцию поддержки браузеров, moz border radius):

    Как это работает

    Существует два способа. Закруглённые углы можно создавать индивидуально для каждого угла, используя свойство border-*-radius (border-bottom-left-radius, border-top-left-radius, и т.д.), либо используя более короткое свойство border-radius.

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

    border-bottom-left-radius, border-bottom-right-radius, border-top-left-radius, border-top-right-radius

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

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

    Синтаксис:

    Пример:

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

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

    На рисунке отображено несколько примеров разных значений и соответствующих им углов:

    Если какое-либо значение будет равно нулю, то угол будет квадратный, а не круглый.

    border-radius

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

    Синтаксис:

    Пример:

    Первый набор значений (1-4) определяет горизонтальные радиусы для всех четырёх углов. Опциональный второй набор значений, указаный после слеша, определяет вертикальные радиусы для всех четырёх углов. Если указан только один набор значений, то он используется одинаково для определения вертикальных и горизонтальных углов.

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

    Поддержка браузеров

    В настоящее время Opera (версия 10,5 и старше), Safari (версия 5 и старше) Chrome (версия 5 и старше) поддерживают как border-radius, так и индивидуальные свойства border-*-radius, описанные в текущей спецификации W3C (хотя ещё есть много мелких ошибок и несогласований, таких как например границы перехода, использование процентов в длине и т.д.).

    Mozilla Firefox (версия 1.0 и старше) поддерживает свойство border-radius с префиксом -moz-, хоть и есть некоторые расхождения между реализацией Mozilla и текущей спецификацией W3C (об этом ниже).

    Последние версии браузера Firefox понимают border-radius без префикса -moz-.

    Safari и Chrome (а так-же другие браузеры, основанные на движке webkit) поддерживают border-radius с префиксом -webkit- начиная с 3 версии (с 5 версии префикс уже не нужен), но так-же с некоторыми отклонениями от текущей спецификации.

    Internet Explorer 9 абсолютно так-же поддерживает свойство border radius.

    Префикс -moz-

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

    Синтаксис, как и написано в данной статье использует префикс -moz-. Основное различие только в названиях отдельных границ свойства border-*-radius, с префиксом -moz- всё выглядит немного по другому:

    W3C Specification Mozilla Implementation
    border-top-left-radius -moz-border-radius-topleft
    border-top-right-radius -moz-border-radius-topright
    border-bottom-right-radius -moz-border-radius-bottomright
    border-bottom-left-radius -moz-border-radius-bottomleft

    Метод с использованием процентов при реализации для браузера Mozilla немного отличается. Об этом можно подробней прочитать в Центре Разработчиков Mozilla здесь.

    Кросс-браузерные примеры

    Несколько базовых примеров, которые отлично работают в текущих версиях Firefox, Safari/Chrome, Opera и IE9:

    Илон Маск рекомендует:  Что такое код ocilogoff

    Свойство border-top-right-radius

    Свойство border-top-right-radius — задает радиус скругления правого верхнего угла элемента.

    Допустимые значения

    • — точное значение радиуса (не может быть отрицательным)
    • — значение радиуса в процентах.

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

    эллиптический радиус

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

    Значение по умолчанию
    Применимо ко всем элементам, кроме табличных элементов для которых свойство border-collapse имеет значение ‘collapse’.
    Наследование нет
    Версия CSS CSS 3
    Поддерживается браузерами
    • Internet Explorer 9 и выше
    • Firefox 4 и выше
    • Opera 10.5 и выше
    • Safari 5 и выше
    • Chrome 5 и выше

    Пример

    Твой код:
    Результат:

    Заметки

    Это свойство относится к CSS3 модулю CSS Backgrounds and Borders Module Level 3 — кандидата в рекомендацию W3C с 17 декабря 2009 года.

    Safari 3-5 и Chrome 1-5 поддерживают аналогичное свойство -webkit-border-top-right-radius, а Firefox 1.0-4.0 -moz-border-radius-topright, но эти свойства не полностью соответствуют спецификации. В частности, -webkit-border-top-right-radius не поддерживает значения радиусов, заданные в процентах, а -moz-border-radius-topright рассчитывает радиус по оси y в процентах от ширины блока, а не от высоты, как в спецификации. Возможность задать эллиптические радиусы через пробел поддерживается в Safari 3 и Chrome 1 и выше и в Firefox 3.5 и выше.

    border-radius

    Свойство border radius CSS используется для закругления углов элемента. Это сокращенная версия свойств: border-top-left-radius , border-top-right-radius , border-bottom-right-radius и border-bottom-left-radius .

    Оно может принимать от одного до четырех значений или восемь значений, разделенных косой чертой «/» , с одним — четырьмя значениями с каждой стороны от косой черты.

    1. Если косая черта не указана, то свойство может принимать одно, два, три или четыре значения.
    • Если задано четыре значения, то они определяют радиусы каждого из четырех углов. То есть первое значение будет указывать x и y радиуса верхнего левого угла, таким образом, это будет круговая кривая. Второе значение задает радиусы для верхнего правого угла, третье — определяет радиусы нижнего правого угла, а четвертое — нижнего левого;
    • Если задано три значения, первое устанавливает радиус верхнего левого угла, второе — радиус верхнего правого и левого нижнего углов, а третье — нижнего правого угла;
    • Если задано два значения CSS table border radius , первое определяет радиусы левого верхнего и правого нижнего углов, а второе — радиусы верхнего правого и нижнего левого углов;
    • Если задано одно значение, то оно задает одинаковые радиусы четырех углов.

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

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

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

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

    Общая информация и примечания

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

    Но иногда цвет фона элемента может « просачиваться » за пределы границы, когда она закруглена. Чтобы исправить это, можно использовать свойство background-clip и установить для него значение padding-box .

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

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

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

    Кроме этого область вне кривой границы не принимает pointer events , связанные с данным элементом.

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

    Процентные значения идеально подходят для создания круглых или эллиптических форм. Использование border radius CSS: 50% дает полностью круглую форму элемента, у которого высота и ширина равны:

    Если высота и ширина элемента не равны, мы получим эллиптическую форму:

    Официальный синтаксис

    Начальное значение: 0 0 0 0, оно задает начальное значения каждого из отдельных свойств.

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

    Анимируется: Каждое из полных свойств анимируется, как два значения длины, процентных значения или значения calc() . Когда оба значения являются длинами, они интерполируются как длины. Когда оба значения являются процентами, они интерполируются в процентах. Иначе оба значения преобразуются свойством calc() .

    Значения

    Неофициальный синтаксис webkit border radius CSS :

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

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

    Поддержка браузерами

    Свойство CSS3 Border-radius (закругленные углы)

    Метод закругления углов. Охватывает поддержку сокращенного свойства border radius CSS , а также полных свойств ( например, `border-top-left-radius` ).

    Рекомендация W3C

    Поддерживается со следующих версий:

    Chrome Firefox IE Opera Safari
    4 * 2 * 9 10 3.1 *
    iOS Safari Android Opera Mobile Android Chrome Android Firefox
    3.2 * 2.1 * 11 56 51

    * требуется указание префикса

    Данная публикация представляет собой перевод статьи « border-radius » , подготовленной дружной командой проекта Интернет-технологии.ру

    Понравилась статья? Поделиться с друзьями:
    Кодинг, CSS и SQL