border-top-left-radius в CSS

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

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

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

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

Синтаксис

Значения

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

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

border-top-left-radius

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

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

Тип свойства

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

Значения

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

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

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

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

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

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

Синтаксис

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

Результат. Использование свойства CSS border-top-left-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-left-radius .

border-top-left-radius

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

12.0+ 9.0+ 4.0+ 5.0+ 10.5+ 5.0+

Описание

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

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

Примечание: чтобы был виден эффект от применения свойства border-top-left-radius нужно, чтобы для элемента была установлена видимая рамка или фон.

CSS3 border-top-left-radius Property

Description

The border-top-left-radius CSS property sets the rounded shape for the «top-left» corner of an element border box.

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

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-left-radius property causes the element’s background to be rounded even if no borders have been defined or its value is set to none .

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-left 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-left-radius property in action.

Example

  • div <
  • border : 2px solid #f08080 ;
  • border-top-left-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-left-radius property.

Browser Compatibility

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

Все о свойстве 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 к тексту:

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

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

Свойство border-top-left-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-left-radius, а Firefox 1.0-4.0 -moz-border-radius-topleft, но эти свойства не полностью соответствуют спецификации. В частности, -webkit-border-top-left-radius не поддерживает значения радиусов, заданные в процентах, а -moz-border-radius-topleft рассчитывает радиус по оси y в процентах от ширины блока, а не от высоты, как в спецификации. Возможность задать эллиптические радиусы через пробел поддерживается в Safari 3 и Chrome 1 и выше и в Firefox 3.5 и выше.

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

В CSS свойство border-top-left-radius используется для указания радиуса верхнего левого угла элемента .

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

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

Пример-1: Использование «длины» .

свойство border-top-left-radiusCSS3-генератор ☛

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

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

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

Синтаксис ?

Обозначения

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

Значения

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

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

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

Пример

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

Примечание

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

Chrome до версии 4, Safari до версии 5 и Andro >-webkit-border-top-left-radius .

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

Спецификация Статус
CSS Backgrounds and Borders Module Level 3 Возможная рекомендация

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

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

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

Браузеры: Настольные Мобильные ?

Internet Explorer Chrome Opera Safari Firefox
Базовый синтаксис 9 1 4 10.5 3 5 1 4
Проценты 9 4 10.5 5 4
Эллиптические уголки 9 1 10.5 3 3.5
Android Firefox Mobile Opera Mobile Safari Mobile
Базовый синтаксис 1 2.1 1 4 10.5 3 5
Проценты 2.1 4 10.5 5
Эллиптические уголки 2.1 3.5 10.5 3

Браузеры

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

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

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

border-top-left-radius not working in IE

I’m using IE10 to design something at the moment [Because it needs to be completely compatible with it], and I’m having trouble.

I have two boxes on either side of the page, with an image at the top. The inner top corner is curved using border-top-*-radius, and this is also implemented on the image inside.

Using IE, you can see that the right container’s image isn’t doing the same as the left’s, even though I just copy and pasted the code and edited it slightly. It does however work on Chrome, which makes me think this may be a bug. Any insight or suggestions on how to resolve this?

EDIT: I’ve found a way to work around it using:

It’s not a proper solution, and I’ve still no clue as to why this happened in the first place, but the 1px is barely noticeable and seems to make it work.

CSS: border-top-left-radius property

This CSS tutorial explains how to use the CSS property called border-top-left-radius with syntax and examples.

Description

The CSS border-top-left-radius property defines rounded corners on the left side of the top border of a box.

Syntax

The syntax for the border-top-left-radius CSS property is:

Parameters or Arguments

The radius value to apply to the left side of the top border of a box. It can be one of the following:

Value Description
fixed Fixed value expressed in px, em, .
div
percentage Percentage value
div
inherit Element will inherit the border-top-left-radius from its parent element
div
  • See also the border-top-right-radius and border-radius properties.

Browser Compatibility

The CSS border-top-left-radius property has basic support with the following browsers:

  • Chrome 4
  • Firefox 4+ (Gecko 2+)
  • Internet Explorer 9+ (IE 9+)
  • Opera 10.5+
  • Safari 5+ (WebKit 3+)

Example

We will discuss the border-top-left-radius property below, exploring examples of how to use this property in CSS.

Let’s look at a CSS border-top-left-radius example where we provide a fixed value.

In this CSS border-top-left-radius example, we have defined rounded corners of 5px on the left side of the top border for the

tag. Be sure to apply a border-top-style so that the border appears.

Next, we’ll look at a CSS border-top-left-radius example where we provide a percentage value.

In this CSS border-top-left-radius example, we have defined rounded corners of 12% to the left side of the top border.

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