Css радиус: 🤷🏽‍♀️ Page not found | MDN Web Docs

Разное 

Содержание

Создать радиус по css — CodeRoad



Я пытаюсь сделать это с помощью border-radius, но это не похоже на это изображение.

html css border
Поделиться Источник Waez Karani     26 марта 2016 в 06:43

3 ответа

  • CSS Радиус Границы Второй Радиус Объяснение

    Я читал документы в https://developer.mozilla.org/ванных/документов/веб/CSS/границы-радиус Атрибут border radius, по-видимому, имеет второе значение radius, /* The syntax of the second radius allows one to four values */ /* (first radius values) / radius */ border-radius: 10px 5% / 20px; /* (first…

  • onclick css-пограничный радиус не работает

    На http:/ / www.backyardbiologics.com я изменил css строки меню на радиус границы: #header-v4 #navigation ul#nav > li.current-menu-item > a, {border-top-left-radius: 8px; border-top-right-radius: 8px; } При наведении курсора радиус границы работает нормально.

    Но при щелчке радиус границы…


0

установите радиус границы: 50%;

Ниже приведен пример кода css для div

div {
height: 500px;
border: 2px solid #a1a1a1;
padding: 10px 40px; 
background: yellow;
width: 400px;
border-radius: 0% 50% 50% 0%;
}

Поделиться Nitishkumar Singh     26 марта 2016 в 06:56


0


Если вы хотите создать круг, дайте одинаковую высоту и ширину div и добавьте свойство border-radius 50%.

.circle{
  width:400px;
  height:400px;
  background:#000;
  border-radius:50%;
  }
<div></div>

Поделиться Vinaya     26 марта 2016 в 07:10


0

Если вы пытаетесь сделать черный круг, просто добавьте следующий код css в класс/идентификатор div. Если вы пробуете все изображение, добавьте этот код css к этому конкретному id/class.(you, вы можете изменить высоту и ширину, если хотите.)

#circle{
  width:200px;
  height:200px;
  background:#000;
  border-radius:100%;
  }
<div></div>

Поделиться Shreyas Sreenivasa     26 марта 2016 в 08:03

Похожие вопросы:


CSS радиус границы и коллапс границы

Я пытаюсь создать таблицу с радиусом границы 12 пикселей, установленную в CSS. Нет никакой границы на tr или td внутри таблицы, только одна граница вокруг всей партии. Я хочу, чтобы первая строка в…


iPad радиус входной границы по умолчанию

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


jQuery Mobile радиус кнопки css

Как сделать радиус кнопки специфичным для конкретной темы?.. Я использую 3 темы, и мне нужен приведенный ниже глобальный код кнопки css, чтобы применить его только к теме B .ui-btn-corner-all {…


CSS Радиус Границы Второй Радиус Объяснение

Я читал документы в https://developer.mozilla.org/ванных/документов/веб/CSS/границы-радиус Атрибут border radius, по-видимому, имеет второе значение radius, /* The syntax of the second radius allows…


onclick css-пограничный радиус не работает

На http:/ / www.backyardbiologics.com я изменил css строки меню на радиус границы: #header-v4 #navigation ul#nav > li.current-menu-item > a, {border-top-left-radius: 8px;…


Внутренняя рамка-радиус изображения

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

..


Jquery css радиус границы конкретный радиус углов?

Здравствуйте, я пытаюсь изменить радиус границы определенных углов некоторых uls с помощью jquery sortable по методу sort. Вот мой код до сих пор, и он не работает, есть идеи? sort: function() { var…


Радиус границы не отображается в CSS

У меня есть файл CSS, в котором объявлена таблица, я хочу добавить изогнутый край. если я попробую пограничный радиус, он вообще не придет. Это код table.display { margin: 0 auto; clear: both;…


SVG радиус окружности с CSS

Я попытался изменить радиус круга SVG на css, и это работает во всех основных версиях браузера. Вопрос в том, почему CSS lint жалуется на свойство r , в то время как все браузеры поддерживают это…


Как установить радиус окружности JavaFX с помощью CSS?

есть ли какое-нибудь свойство CSS, которое установило бы радиус окружности? Интуитивно я пробовал fx-radius или fx-size, но это не так. Я не хочу устанавливать каждый радиус круга отдельно в файле…

Свойство border-radius — скругленные уголки

Свойство border-radius создает скругленные уголки для границы и фона. Значением свойства служат любые единицы для размеров. Значение по умолчанию:

0. Является сокращением для свойств border-top-left-radius, border-top-right-radius, border-bottom-left-radius, border-bottom-right-radius.

Синтаксис

селектор { border-radius: значение; }

Количество значений

Свойство может принимать 1, 2, 3 или 4 значений, указываемых через пробел:

КоличествоОписание
1Для всех углов одновременно.
2 Первое значение задает скругление для верхнего правого и нижнего левого углов, второе — для верхнего левого и нижнего правого.
3 Первое значение задает скругление для верхнего левого угла, второе — одновременно для верхнего правого и нижнего левого, а третье — для нижнего правого угла.
4 Первое значение задает скругление для верхнего левого угла, второе — для верхнего правого, третье — для нижнего правого угла, а четвертое — для нижнего левого угла.

Эллиптическое скругление

Два значения через слеш устанавливают эллиптическое скругление. Значение перед слешем указывает горизонтальное скругление, а значения после слеша — вертикальное:

селектор { border-style: горизонтальное / вертикальное; }

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

Пример

Установим скругление 10px для всех углов:

<div></div> #elem { border-radius: 10px; border: 1px solid black; width: 300px; height: 100px; }

:

Пример

Посмотрим, как выглядит скругления для границы в виде точек:

<div></div> #elem { border-radius: 10px; border: 1px dotted black; width: 300px; height: 100px; }

:

Пример

Установим скругление в 10px для углов одной диагонали, и скругления в 40px — для углов второй диагонали:

<div></div> #elem { border-radius: 10px 40px; border: 1px solid black; width: 300px; height: 100px; }

:

Пример

Установим скругление в 10px для верхнего левого угла, скругление в 30px для нижнего правого угла, и скругления в 50px — для углов второй диагонали:

<div></div> #elem { border-radius: 10px 50px 30px; border: 1px solid black; width: 300px; height: 100px; }

:

Пример

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

<div></div> #elem { border-radius: 10px 30px 50px 70px; border: 1px solid black; width: 300px; height: 100px; }

:

Пример

Давайте сделаем эллиптическое скругление, установив 20px для горизонтальной части скругления, а 40px — для вертикальной:

<div></div> #elem { border: 1px solid black; border-radius: 20px / 40px; width: 300px; height: 100px; }

:

Пример

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

<div></div> #elem { border: 1px solid black; border-radius: 20px 30px 20px 30px / 40px 60px 40px 60px; width: 300px; height: 100px; }

:

Пример

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

<div></div> #elem { border-radius: 100px; border: 1px solid black; width: 200px; height: 200px; }

:

Пример

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

<div></div> #elem { border-radius: 200px; border: 1px solid black; width: 200px; height: 200px; }

:

Пример

Круг можно также получить, если установить border-radius в 50% (преимущество в том, что при изменении размеров квадрата не придется менять скругление):

<div></div> #elem { border: 1px solid black; border-radius: 50%; width: 200px; height: 200px; }

:

Пример

Если установить border-radius в процентах для прямоугольника, то получится эллиптическое скругление. Если ширина задана в 400px, высота в 200px, а border-radius в 10%, то это все равно, как если бы было написано border-radius: 40px/20px;. Эти значения получились отсюда: 40px = 400px*10%, 20px = 200px*10%:

<div></div> #elem { border-radius: 10%; border: 1px solid black; width: 400px; height: 200px; }

:

Пример

Установим значение border-radius в 50% для прямоугольника — получится эллипс:

<div></div> #elem { border-radius: 50%; border: 1px solid black; width: 400px; height: 200px; }

:

Пример

Свойство border-radius скругляет не только уголки не границы, но и фона:

<div></div> #elem { border-radius: 20px; width: 300px; height: 100px; background-color: #e4f1ed; }

:

Смотрите также

  • свойство border,
    которое является свойством-сокращением для границы

Border-Radius не работает в Email и браузере



Я разрабатывал информационный бюллетень, и пока граница-радиус работает на моем localhost (показывая все округлые края) — но он не работает при тестировании через образец email. Я отправил себе письмо по электронной почте yahoo и Firefox, оно вышло с острыми краями. Он не работает и в outlook 2007 году.

Кто-нибудь знает, как решить эту проблему? Я буду благодарен Вам за помощь.

html email css
Поделиться Источник Julie     22 августа 2011 в 10:34

3 ответа


6

Он никогда не будет работать в outlook 2007, так как использует word в качестве средства визуализации, которое не поддерживает большинство css.

Для firefox вам нужно добавить префикс -moz- , пожалуйста, убедитесь, что вы это сделали.

Если нет, опубликуйте свои версии css и firefox.

Поделиться rickyduck     22 августа 2011 в 10:37


4

Я не думаю, что Outlook 2007 поддерживает свойство border-radius , поэтому, вероятно, это нормально, если он не отображает закругленные углы. Если вы ищете обходной путь, я предлагаю вам взглянуть на этот вопрос: Как я могу сделать закругленные углы в браузерах, отличных от CSS3?

Для CSS в современных браузерах в настоящее время вам необходимо префиксировать определенные свойства, например:

.withRoundedCorners {
    border-radius: 5px;        // Standard
    moz-border-radius: 5px;    // Firefox
    khtml-border-radius: 5px;  // 
    o-border-radius: 5px;      // Opera
    webkit-border-radius: 5px; // Safari
    ms-border-radius: 5px;     // Internet Explorer 9+
}

Я знаю, что это скучно… Но это временно, в будущем потребуется только border-radius .

Поделиться Luc125     22 августа 2011 в 10:53


1

Информационные бюллетени в инструментах кампании email, таких как (outlook, gmail, hotmail), имеют меньшую поддержку CSS. Кроме того, border-radius поддерживается для веб-браузеров, а не для клиентов email.

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

См. Эту ссылку: Монитор кампании

Эта ссылка показывает, какое свойство CSS поддерживается различными клиентами email.

См. Другие ссылки: Email информационный бюллетень не отображается правильно

Поделиться Ahsan Rathod     22 августа 2011 в 10:45

Похожие вопросы:


альтернатива border-radius в шаблонах email

Ну, я разрабатываю шаблоны email и знаю, что CSS3 не работает на большинстве поставщиков email. Я пытаюсь согнуть границы (это может быть DONE на border-radius — но это NOT поддерживается…


border-radius не работает в современном нативном браузере Android

У меня есть страница, которая использует border-radius. Он не отображается закругленным в родном браузере Android; он отображается с квадратными углами. Он отлично отображается в настольном Chrome,…


Border radius не работает в браузере Chrome & Safari

Я использую радиус границы для своих изображений, угол изображений не округляется. Но тот же код исправно работал в Mozila Firefox. CSS : body img { border-radius: 20px 20px 20px 20px;…


свойство border-radius css не работает в живом клиенте windows

На самом деле я создаю шаблон HTML Email, все работает, но border-radius не работает в живом клиенте windows, хотя он также работает в браузерах и gmail. <div style=’width: 700px; font-family:…


конкретный класс css будет выполняться в браузере IE8, а border-radius не работает

1.I имеет следующий класс в файле CSS .dashboard-area { width:1200px; } У меня есть вышеприведенный класс code / css, который будет включен в браузер IE8 вместо всех браузеров. Не надо мне приводить…


стиль border-radius не работает в браузере android

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


Border radius не работает в Safari с border

Когда я вставляю css Border-radius с border, он не работает должным образом. Если я удалю границу, то она будет работать нормально. Эта проблема в браузере on safari. См. код и прилагаемое…


Ошибка Border Radius в браузере Chrome на элементе с Display:Table

У меня есть ошибка с border radius в браузере chrome. Элемент, стилизованный с помощью свойства border-style dashed и border-radius и as display:table;, цвет фона превышает предел границы. Как это…


border-radius firefox не работает

Я пытаюсь заставить свойство border-radius работать на таблице в Firefox. Он отлично работает в chrome, и мне все равно, что IE 8 и ниже. Мой CSS: table.tableCenter{ padding: 0; width: 100%;…


Свойство Border-radius не работает в outlook

У меня есть кнопка в моем email, которая при просмотре через outlook имеет некоторые проблемы с радиусом границы. Он не учитывает стили, которые я даю для border-radius и padding. Но то же самое…

CSS свойство border-radius | назначение, допустимые значения, примеры

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

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

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

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

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

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

Значение по умолчанию0
Применимоко всем элементам, кроме табличных элементов для которых свойство border-collapse имеет значение ‘collapse’.
Наследованиенет
Версия CSSCSS 3
Поддерживается браузерами

Пример

.block {
border-radius: 10px/20%;
border: 1px solid #000;
}

Твой код:
<html> <head> <title></title> <style type=»text/css»> <!— .block { width: 80%; height: 50%; background: #3490fb; color: #000; border: 2px solid #f00; border-radius: 40px 30px 60px / 20px 10%; } —> </style> </head> <body> <div> блок со скругленными уголками (работает в Opera 10. 5 и выше). </div> </body> </html>Сделай код и жми тут

Результат:
большой полигон

Заметки

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

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

Свойство border-right Свойство border-left-width

border-radius CSS | CSS

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

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

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

Например:

border-radius: 1em 3em 2em;

эквивалентно:

border-top-left-radius:     1em;
border-top-right-radius:    3em;
border-bottom-right-radius: 2em;
border-bottom-left-radius:  3em;

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

Два одинаковых радиуса для каждого угла дают круговую кривую. Каждый угол в этом примере имеет горизонтальный и вертикальный радиус 50 пикселей.

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

border-radius: [верхний левый горизонтальный радиус] [верхний правый горизонтальный радиус]? [нижний правый горизонтальный радиус]? [нижний левый горизонтальный радиус]? / [верхний левый вертикальный радиус] [верхний правый вертикальный радиус]? [нижний правый вертикальный радиус]? [нижний левый вертикальный радиус]?

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

Например:

border-radius: 2em 1em 4em / 0.5em 3em;

эквивалентно:

border-top-left-radius:     2em 0.5em;
border-top-right-radius:    1em 3em;
border-bottom-right-radius: 4em 0.5em;
border-bottom-left-radius:  1em 3em;

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

Два неодинаковых радиуса для каждого угла дают эллиптическую кривизну. Каждый угол в этом примере имеет горизонтальный радиус 100 пикселей и вертикальный радиус 50 пикселей.

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

Фоновое изображение элемента обрезается в соответствии с указанным радиусом границы.

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

.element {
    border-radius: 30px;
    background-clip: padding-box;
}

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

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

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

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

.element {
    background: black;
    color: white;
    border-radius: 1em;
    padding: 1em;
}

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

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

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

Элемент с одинаковой высотой, шириной и значением радиуса границы 50%.

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

Элемент с радиусом границы 50%, высота и ширина которого не равны.

Синтаксис:

border-radius: [<длина> | <проценты>] {1,4} [/ [<длина> | <проценты>] {1,4}]?

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

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

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

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

border-radius: [значение радиуса] [значение радиуса]? [значение радиуса]? [значение радиуса]?;

или так:

border-radius: [верхний левый горизонтальный радиус] [верхний правый горизонтальный радиус]? [нижний правый горизонтальный радиус]? [нижний левый горизонтальный радиус]? / [верхний левый вертикальный радиус] [верхний правый вертикальный радиус]? [нижний правый вертикальный радиус]? [нижний левый вертикальный радиус]?

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

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

<percentage>
<length>

Примеры

border-radius: 50%;
border-radius: 30px 20px 40px;
border-radius: 1em 2em;
border-radius: 3em / 2em 4em;
border-radius: 1em 2em 1em 3em / 2em 3em;

Демо-версия

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

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

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

Стационарные

ChromeFirefoxIEOperaSafari
4 *2 *9103. 1 *

Мобильные

iOS SafariAndroidOpera MobileAndroid ChromeAndroid Firefox
3.2 *2.1 *115651

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

Пожалуйста, опубликуйте свои комментарии по текущей теме статьи. За комментарии, дизлайки, подписки, лайки, отклики низкий вам поклон!

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

CSS — border-radius — border-radius CSS свойство округляет углы внешнего края элемента. Вы можете уста

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

Радиус применяется ко всему background , даже если элемент не имеет границы; Точная позиция отсечения определяется свойством background-clip .

border-radius собственности не распространяется на элементы таблицы , когда border-collapse является collapse .

Примечание. Как и с любым сокращенным свойством, отдельные дочерние свойства не могут наследовать, например, в border-radius:0 0 inherit inherit , что частично перекрывает существующие определения. Вместо этого должны использоваться отдельные свойства.


Constituent properties

Это свойство является сокращением для следующих свойств CSS:

Syntax


border-radius: 10px;


border-radius: 10px 5%;


border-radius: 2px 4px 2px;


border-radius: 1px 0 3px 4px;



border-radius: 10px / 20px;


border-radius: 10px 5% / 20px 30px;


border-radius: 10px 5px 2em / 20px 25px 30%;


border-radius: 10px 5% / 20px 25em 30px 35em;


border-radius: inherit;
border-radius: initial;
border-radius: unset;

Свойство border-radius определяется как:

  • одно, два, три или четыре значения <length> или <percentage> . Это используется для установки единого радиуса для углов.
  • за ними необязательно следуют «/» и одно, два, три или четыре значения <length> или <percentage> . Это используется для установки дополнительного радиуса, так что вы можете иметь эллиптические углы.

Values

<length>
Обозначает размер радиуса окружности,или полуосевой и полуминутной осей эллипса,используя значения длины.Отрицательные значения недействительны.
<percentage>
Обозначает размер радиуса окружности или полуосей эллипса в процентах.Проценты для горизонтальной оси означают ширину окошка;проценты для вертикальной оси означают высоту окошка.Отрицательные значения недействительны.

Например:

border-radius: 1em/5em;


border-top-left-radius:     1em 5em;
border-top-right-radius:    1em 5em;
border-bottom-right-radius: 1em 5em;
border-bottom-left-radius:  1em 5em;

border-radius: 4px 3px 6px / 2px 4px;


border-top-left-radius:     4px 2px;
border-top-right-radius:    3px 4px;
border-bottom-right-radius: 6px 2px;
border-bottom-left-radius:  3px 4px;

Formal definition

Формальный синтаксис

<length-percentage>{1,4} [ / <length-percentage>{1,4} ]?where <length-percentage> = <length> | <percentage>

Examples

  border: solid 10px;
  
  border-radius: 10px 40px 40px 10px;

  border: groove 1em red;
  border-radius: 2em;

  background: gold;
  border: ridge gold;
  border-radius: 13em/3em;

  border: none;
  border-radius: 40px 10px;

  border: none;
  border-radius: 50%;

  border: dotted;
  border-width: 10px 4px;
  border-radius: 10px 40px;

  border: dashed;
  border-width: 2px 4px;
  border-radius: 40px;

Живые образцы

Specifications

Совместимость с браузерами

DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebView AndroidХромовый AndroidFirefox для AndroidОпера АндроидSafari на IOSSamsung Интернет
border-radius

4

Chrome игнорирует border-radius в элементах <select> , если -webkit-appearance не переопределено на соответствующее значение.

1

12

12

4

[«До Firefox 50 стили границ закругленных углов (с border-radius ) всегда отображались так, как если бы border-style был solid . Это было исправлено в Firefox 50.», «Чтобы соответствовать стандарту CSS3, в Firefox 4 внесены изменения обработка значений <percentage> в соответствии со спецификацией. Вы можете указать эллипс в качестве границы на элементе произвольного размера с border-radius: 50%; Firefox 4 также делает закругленные углы обрезать содержимое и изображения, если overflow : visible не набор.»]

1-12

9

10.5

До Opera 11.60 замененные элементы с border-radius не имели закругленных углов.

5

Safari игнорирует border-radius на <select> элементов , если -webkit-appearance не переопределяется в соответствующее значение.

3

≤37

2

18

4

До Firefox 50 стили границ закругленных углов (с border-radius ) всегда отображались так, как если бы border-style был solid . Это было исправлено в Firefox 50.

4-14

11

4.2

Safari игнорирует border-radius на <select> элементов , если -webkit-appearance не переопределяется в соответствующее значение.

1

1.0

elliptical_borders

1

До Chrome 4 косая черта / обозначение не поддерживаются. Если указаны два значения, то на всех четырех углах рисуется эллиптическая граница. -webkit-border-radius: 40px 10px; эквивалентен border-radius: 40px / 10px; .

12

4

9

10.5

3

До Safari 5 косая черта / обозначение не поддерживаются. Если указаны два значения, то на всех четырех углах рисуется эллиптическая граница. -webkit-border-radius: 40px 10px; эквивалентно border-radius: 40px / 10px; .

≤37

18

4

11

4.2

1.0

percentages

8

12

4

<percentage> Значения <процент> реализованы нестандартным способом до Firefox 4. Как горизонтальный, так и вертикальный радиусы были относительно ширины рамки.

9

11.5

Реализация значений <percentage> была ошибкой в ​​Opera до 11.50.

5.1

≤37

18

4

11.5

6

1.0

4_values_for_4_corners

4

12

4

9

10. 5

5

≤37

18

4

11

4.2

1.0

См.также

интересные возможности border-radius / Блог компании RUVDS.com / Хабр

Что можно сделать с помощью CSS-свойства

border-radius

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


Предлагаем поговорить о тонкостях использования border-radius.

Старые свойства и современный веб-дизайн

В этом году, на

Frontend Conference Zurich

,

Рэйчел Эндрю

сделала

доклад

о возможностях технологии CSS Grid. В конце выступления она сказала кое-что о старых CSS-свойствах и её слова меня зацепили. А именно звучало это так: «Изображение сделано круглым исключительно с использованием хорошо поддерживаемого свойства

border-radius

. Не забывайте о том, что старый CSS всё ещё существует и всё ещё может приносить пользу. Вам не обязательно всегда пользоваться чем-то совершенно новым для создания каких-либо эффектов».

Через некоторое время после этого выступления мне в голову пришла мысль о том, что круг— это лишь малая часть того, что можно сделать с помощью border-radius. Увлечённый этой идеей, я решил как следует разобраться с этим свойством.

Освоение border-radius


▍Единственное значение

Начнём с основ. Надеюсь, вы на этом примере не заскучаете. Вы, возможно, знакомы с CSS, да и со свойством

border-radius

— тоже. Оно существует уже довольно давно, и пользуются им, в основном, указывая единственное значение. Выглядит это так:

border-radius: 1em

. Возможно, это было одной из самых обсуждаемых возможностей CSS3 в 2010-м, когда лучшим другом дизайнера был сайт

css3please.com

.

При использовании единственного значения для border-radius углы элемента скругляются в соответствии с этим значением.


Скругление всех углов квадрата в соответствии с единственным значением border-radius

Как видно из вышеприведённого примера, задавать фиксированные значения можно не только указывая после чисел некие единицы измерения, вроде px, rem или em, но и знак процента. Обычно это используется для создания окружностей на основе квадратов, когда border-radius устанавливают в 50%. Процентное значение основано на ширине и высоте элемента. Поэтому, когда его применяют к прямоугольникам, получившиеся углы симметричными не будут. Вот пример, демонстрирующий разницу между свойствами border-radius: 110px и border-radius: 30%, применёнными к прямоугольнику.


Скругление углов прямоугольника

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

▍Четыре отдельных значения

При использовании более чем одного значения

border-radius

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


Настройка параметров для четырёх углов элемента

▍Восемь значений, разделённых косой чертой

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

спецификацию

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

Итак, значения до косой черты ответственны за горизонтальные расстояния, а значения после косой черты — за вертикальные. Всё это хорошо, но тут возникает закономерный вопрос: «А о чём вообще идёт речь?». Помните процентные значения скругления углов, задаваемые для прямоугольных фигур? Там были применены разные абсолютные значения для вертикальных и горизонтальных расстояний и присутствовали асимметрично скруглённые углы. Именно такого эффекта можно добиться, используя косую черту при настройке border-radius.

Давайте сравним эффекты, которые дают следующие настройки: border-radius: 4em 8em и border-radius: 4em / 8em. Результаты получатся очень разными.


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

Если честно, фигуры, полученные в результате применения вышеописанных настроек, выглядят странновато. Однако не забывайте о том, что окружности создаются с помощью таких параметров: border-radius: 50%. Окружность получается из-за того, что два значения, задающие одну сторону, складываются и получается 100% (50% + 50% = 100%) и прямых линий от исходного квадрата не остаётся. Если порассуждать в том же духе о восьми значениях, используемых при задании свойства border-radius, то окажется, что с их помощью можно описать фигуру, которая похожа на гитарный медиатор или на клетку живого организма.


Фигура, полученная в результате применения 8 значений, разделённых косой чертой
Четыре перекрывающихся эллипса, формирующих фигуру

Мне потребовалось некоторое время на то, чтобы к этому привыкнуть. Порой все эти конструкции бывает сложно осмыслить. Если вас привлекают сложные формы элементов, настраиваемые с помощью border-radius, можете воспользоваться этим небольшим инструментом.

Итоги

Теперь, когда вы знаете о том, что при настройке

border-radius

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

вот

, специально для вас, его версия, поддерживающая независимую настройку всех восьми значений. Прежде чем вы им воспользуетесь — вспомните один разговор из фильма «Охотники за привидениями» 1984-го года:

— Не скрещивайте потоки.
— Почему?
— А то будет плохо.

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

Уважаемые читатели! Пользуетесь ли вы CSS-свойством border-radius?

border-top-left-radius — CSS: Cascading Style Sheets

Свойство CSS border-top-left-radius округляет верхний левый угол элемента, задавая радиус (или радиус полукруга). -большая и малая полуоси) эллипса, определяющего кривизну угла.

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

Фон, являющийся изображением или цветом, обрезается по краю, даже если он закруглен; точное место отсечения определяется значением свойства background-clip .

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

 

граница-верх-левый-радиус: 3 пикселя;



граница-верхний-левый-радиус: 0.5em 1em;

граница-верх-левый-радиус: наследовать;


граница-верхний-левый-радиус: наследовать;
граница-верх-левый-радиус: начальный;
граница-верхний-левый-радиус: вернуться;
граница-верхний-левый-радиус: не задано;

С одним значением:

  • значение — <длина> или <процент> , обозначающее радиус круга, который будет использоваться для границы в этом углу.

С двумя значениями:

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

Значения

<длина-процент>

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

Дуга окружности

Одно значение <длина> дает дугу окружности.

  div {
  граница-верх-левый-радиус: 40 пикселей;
  цвет фона: светло-зеленый;
  граница: сплошная черная 1px;
  ширина: 100 пикселей;
  высота: 100 пикселей;
}

Дуга эллипса

Два разных значения образуют дугу эллипса.

  div {
  граница-верх-левый-радиус: 40 пикселей 20 пикселей;
  цвет фона: светло-зеленый;
  граница: сплошная черная 1px;
  ширина: 100 пикселей;
  высота: 100 пикселей;
}

Квадратный элемент с радиусом в процентах

Квадратный элемент с одним значением <процент> образует дугу окружности.

  div {
  граница-верх-левый-радиус: 40%;
  цвет фона: светло-зеленый;
  граница: сплошная черная 1px;
  ширина: 100 пикселей;
  высота: 100 пикселей;
}

Неквадратный элемент с процентным радиусом

Неквадратный элемент с одним значением <процент> образует дугу эллипса.

  div {
  граница-верх-левый-радиус: 40%;
  цвет фона: светло-зеленый;
  граница: сплошная черная 1px;
  ширина: 200 пикселей;
  высота: 100 пикселей;
}

таблицы BCD загружаются только в браузере

border-bottom-right-radius — CSS: Cascading Style Sheets

Свойство CSS border-bottom-right-radius закругляет нижний правый угол элемента путем указания радиуса (или радиуса большой и малой полуосей) эллипса, определяющего кривизну угла.

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

Фон, являющийся изображением или цветом, обрезается по краю, даже если он закруглен; точное место отсечения определяется значением свойства background-clip .

Примечание: Если значение этого свойства не установлено в сокращенном свойстве border-radius , которое применяется к элементу после свойства CSS border-bottom-right-radius , тогда значение этого свойства будет сбрасывается в исходное значение сокращенным свойством.

 

граница-нижний-правый-радиус: 3px;


граница-нижний-правый-радиус: 20%;
граница-нижний-правый-радиус: 20% 20%;
граница-нижний-правый-радиус: 20% 10%;



граница-нижний-правый-радиус: 0.5em 1em;


граница-нижний-правый-радиус: наследование;
граница-нижний-правый-радиус: начальный;
граница-нижний-правый-радиус: вернуться;
граница-нижний-правый-радиус: не задано;

С одним значением:

  • значение — <длина> или <процент> , обозначающее радиус круга, который будет использоваться для границы в этом углу.

С двумя значениями:

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

Значения

<длина-процент>

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

Дуга окружности

Одно значение <длина> дает дугу окружности.

  div {
  граница-нижний-правый-радиус: 40 пикселей;
  цвет фона: светло-зеленый;
  граница: сплошная черная 1px;
  ширина: 100 пикселей;
  высота: 100 пикселей;
}

Дуга эллипса

Два разных значения образуют дугу эллипса.

  div {
  граница-нижний-правый-радиус: 40 пикселей 20 пикселей;
  цвет фона: светло-зеленый;
  граница: сплошная черная 1px;
  ширина: 100 пикселей;
  высота: 100 пикселей;
}

Квадратный элемент с радиусом в процентах

Квадратный элемент с одним значением <процент> образует дугу окружности.

  div {
  граница-нижний-правый-радиус: 40%;
  цвет фона: светло-зеленый;
  граница: сплошная черная 1px;
  ширина: 100 пикселей;
  высота: 100 пикселей;
}

Неквадратный элемент с процентным радиусом

Неквадратный элемент с одним значением <процент> образует дугу эллипса.

  div {
  граница-нижний-правый-радиус: 40%;
  цвет фона: светло-зеленый;
  граница: сплошная черная 1px;
  ширина: 200 пикселей;
  высота: 100 пикселей;
}

таблицы BCD загружаются только в браузере

border-top-right-radius — CSS: Cascading Style Sheets

Свойство CSS border-top-right-radius закругляет верхний правый угол элемента путем указания радиуса (или радиуса большой и малой полуосей) эллипса, определяющего кривизну угла.

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

Фон, являющийся изображением или цветом, обрезается по краю, даже если он закруглен; точное место отсечения определяется значением свойства background-clip .

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

 

граница-верх-правый-радиус: 3 пикселя;



граница-верх-правый-радиус: 0.5em 1em;

граница-верх-правый-радиус: наследовать;


граница-верх-правый-радиус: наследовать;
граница-верх-правый-радиус: начальная;
граница-верх-правый-радиус: вернуться;
граница-верх-правый-радиус: не задано;

С одним значением:

  • значение — <длина> или <процент> , обозначающее радиус круга, который будет использоваться для границы в этом углу.

С двумя значениями:

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

Значения

<длина-процент>

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

Дуга окружности

Одно значение <длина> дает дугу окружности.

  div {
  граница-верх-правый-радиус: 40 пикселей;
  цвет фона: светло-зеленый;
  граница: сплошная черная 1px;
  ширина: 100 пикселей;
  высота: 100 пикселей;
}

Дуга эллипса

Два разных значения образуют дугу эллипса.

  div {
  граница-верх-правый-радиус: 40 пикселей 20 пикселей;
  цвет фона: светло-зеленый;
  граница: сплошная черная 1px;
  ширина: 100 пикселей;
  высота: 100 пикселей;
}

Квадратный элемент с радиусом в процентах

Квадратный элемент с одним значением <процент> образует дугу окружности.

  div {
  граница-верх-правый-радиус: 40%;
  цвет фона: светло-зеленый;
  граница: сплошная черная 1px;
  ширина: 100 пикселей;
  высота: 100 пикселей;
}

Неквадратный элемент с процентным радиусом

Неквадратный элемент с одним значением <процент> образует дугу эллипса.

  div {
  граница-верх-правый-радиус: 40%;
  цвет фона: светло-зеленый;
  граница: сплошная черная 1px;
  ширина: 200 пикселей;
  высота: 100 пикселей;
}

Таблицы BCD загружаются только в браузере

HTML DOM Style borderRadius Свойство

❮ Объект стиля

Пример

Добавить закругленные границы к элементу div:

document. getElementById («myDIV»). style.borderRadius = «25px»;

Попробуйте сами »

Определение и использование

Свойство borderRadius — это сокращенное свойство для установки или возврата четырех свойств borderRadius.

Четыре свойства радиуса границы (в этом порядке):

borderTopLeftRadius
borderTopRightRadius
borderBottomRightRadius
borderBottomLeftRadius

Совет: Это свойство позволяет добавлять закругленные углы к элементам!

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

Имущество
граница Радиус Есть 9.0 Есть Есть Есть

Синтаксис

Вернуть границу Свойство радиуса:

объект .style.borderRadius

Установить свойство borderRadius:

объект . style.borderRadius = «1-4 длина | % / 1-4 длина | % | начальный | наследование»

Примечание: Четыре значения для каждого радиуса даны в следующем порядке: верхний левый, верхний правый, внизу справа, внизу слева.Если нижний левый опущен, это то же самое, что в правом верхнем углу. Если нижний правый угол опущен, это то же самое, что и верхний левый. Если вверху справа опускается, это то же самое, что и в верхнем левом углу.

Значения свойств

.
Значение Описание
длина Определяет форму углов. Значение по умолчанию: 0
% Определяет форму углов в%
начальный Устанавливает для этого свойства значение по умолчанию.Читать о начальных
наследовать Наследует это свойство от своего родительского элемента. Читать о наследовать

Технические детали

Значение по умолчанию: 0
Возвращаемое значение: Строка, представляющая свойство border-radius элемента
Версия CSS CSS3

Связанные страницы

Ссылка CSS: свойство border-radius

❮ Объект стиля

CSS Border Radius — TutorialBrain

На главную »CSS» Радиус границы CSS

Итак, что такое Border Radius? Теперь, чтобы обеспечить закругленные углы для любого элемента, мы должны использовать border-radius .

сплошная рамка черного цвета с радиусом
пунктирная рамка желтого цвета и радиус при условии
кромка канавки с эллиптической кромкой

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

border-radius — сокращенное обозначение для border-top-left-radius , border-top-right-radius , border-bottom-right-radius и граница-нижний-левый-радиус .

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

  • (в пикселях, em, ex, vw, rem, мм, cm, in, ex, ch и т. Д.)
  • %
  • исходный
  • наследовать
  • не задано

Вы также можете задать радиус границы с помощью фонового изображения или изображения границы.

Синтаксис CSS-Border (сокращенно):
border-radius: value (по длине, в процентах, начальное значение, наследование, не задано);

Это сокращенный синтаксис свойства CSS border-radius и наиболее предпочтительный синтаксис для радиуса границы.

Примечание / информация

  • Если задать радиус границы как 50% для всех 4 границ, тогда получится круг .
  • border-radius: initial означает, что border-top-left-radius: 0 , border-top-right-radius: 0 ,
    & nbsp & nbsp & nbsp border-bottom-right -радиус: 0 и border-bottom-left-radius: 0
  • Если вы не хотите закруглять какой-либо конкретный угол, вы можете пропустить его или установить для него значение 0 .
    • × Закрыть оповещение

    Пример использования сокращенного свойства border-radius 

     <стиль>
.border_radius1 {
  граница: 5 пикселей сплошного синего цвета;
  радиус границы: 40 пикселей;
  черный цвет;
  отступ: 10 пикселей;
  ширина: 120 пикселей;
  высота: 190 пикселей;
}

.border_radius2 {
  граница: темно-синяя канавка 3px;
  радиус границы: 50%;
  цвет фона: красный;
  отступ: 10 пикселей;
  ширина: 100 пикселей;
  высота: 100 пикселей;
}

.border_radius3 {
  граница: желтая канавка 3px;
  радиус границы: начальный;
  цвет фона: зеленый;
  цвет белый;
  отступ: 10 пикселей;
  ширина: 100 пикселей;
  высота: 100 пикселей;
}

    Если border-radius имеет 1 значение :

    Пример:
    border-radius: 5px;

    Здесь радиус верхнего левого, верхнего правого, нижнего левого и нижнего правого краев составляет 5 пикселей каждый.

    Если border-radius имеет 2 значения :

    Пример:
    border-radius: 10% 5em;

    В этом случае радиус верхнего левого и нижнего правого углов равен 10% каждый.Точно так же радиус верхнего правого и нижнего левого угла равен 5em каждый.

    Если border-radius имеет 3 значения:

    Пример:
    border-radius: 5px начальные 20%;

    В результате радиус верхнего левого угла составляет 5 пикселей, для каждого радиуса верхнего правого и нижнего левого угла установлено начальное значение. Точно так же радиус правого нижнего угла будет 20%.

    Если border-radius имеет 4 значения :

    Пример:
    border-radius: 5px 10% 4em 8px;

    Аналогично, радиус верхнего левого угла составляет 5 пикселей, верхнего правого угла — 10%, нижнего правого угла — 4em, а нижнего левого угла — 8 пикселей.

    Пример, показывающий радиус границы с 2 значениями и 3 значениями 

     <стиль>
# bor-rad2val {
  цвет фона: синий;
  граница: 2 пикселя сплошной красный;
  ширина: 300 пикселей;
  высота: 150 пикселей;
  отступ: 10 пикселей;
  радиус границы: 30 пикселей 10 пикселей;
}
# bor-rad3val {
  граница: 2 пикселя сплошного зеленого цвета;
  радиус границы: 1em 10% 30px;
  отступ: 10 пикселей;
}

    Если радиус границы имеет 1 значение вместе с символом «/».

    Например:
    border-radius: 3px / 2em;

    • граница-верх-левый-радиус: 3px 2em;
    • граница-верх-правый-радиус: 3px 2em;
    • граница-нижний-правый-радиус: 3px 2em;
    • граница-нижний-левый-радиус: 3px 2em; каждый.

    Если border-radius имеет 2 значения вместе с символом «/».

    Пример 1:
    border-radius: 10% 5em / 10px;

    • граница-верх-левый-радиус: 10% 10 пикселей;
    • граница-нижний-правый-радиус: 10% 10px;
    • граница-верх-правый-радиус: 5em 10px;
    • граница-нижний-левый-радиус: 5em 10px;

    Пример 2:
    border-radius: 10% 5em / 10px 20px;

    • граница-верх-левый-радиус: 10% 10 пикселей;
    • граница-нижний-правый-радиус: 10% 10px;
    • граница-верх-правый-радиус: 5em 20px;
    • граница-нижний-левый-радиус: 5em 20px;

    Пример 3:
    border-radius: 10% 5em / 10px 20px 30px;

    • граница-верх-левый-радиус: 10% 10 пикселей;
    • граница-нижний-правый-радиус: 10% 30 пикселей;
    • граница-верх-правый-радиус: 5em 20px;
    • граница-нижний-левый-радиус: 5em 20px;

    Если border-radius имеет 3 значения вместе с символом «/»

    Пример:
    border-radius: 5px 3em 20% / 8px 10px;

    • граница-верх-левый-радиус: 5 пикселей 8 пикселей;
    • граница-нижний-правый-радиус: 20% 8px;
    • граница-верх-правый-радиус: 3em 10px;
    • граница-нижний-левый-радиус: 3em 10px;

    Если радиус границы имеет 4 значения вместе с символом «/».

    Пример:
    border-radius: 5px 10% 4em 8px / 3px;

    • граница-верх-левый-радиус: 5 пикселей 3 пикселя;
    • граница-верх-правый-радиус: 10% 3px;
    • граница-нижний-правый-радиус: 4em 3px;
    • граница-нижний-левый-радиус: 8px 3px;

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

    1. Для радиуса верхняя левая граница — Свойство border-top-left-radius.
    2. И радиус a top right border — Свойство border-top-right-radius.
    3. Здесь радиус правая нижняя граница — Свойство граница-нижний-правый-радиус.
    4. Если радиус , нижняя левая граница — Свойство border-bottom-left-radius.

    Пример отдельного определения радиуса отдельной границы 

     <стиль>
# bor-rad8val {
  цвет фона: aquA;
  граница: 2px сплошной КРАСНОЙ;
  ширина: 350 пикселей;
  высота: 200 пикселей;
  отступ: 10 пикселей;
  граница-верх-левый-радиус: 8em 1.5em;
  граница-верх-правый-радиус: 30%;
  граница-нижний-правый-радиус: 15em 20em;
}

    CSS Вопросы и ответы на собеседовании

    Мы можем применить радиус границы для двух углов двумя способами:

    1. Путем упоминания границы с именем угла.

    Пример: 

     border-top-left-radius: 30px;
граница-верх-правый-радиус: 10 пикселей;
граница-нижний-правый-радиус: 30 пикселей;
граница-нижний-левый-радиус: 10 пикселей;

    2.Задавая только два значения для border-radius.

    Пример :

    Если border-radius имеет 2 значения:

     border-radius: 10% 5em;

    В этом случае радиус верхнего левого и нижнего правого углов равен 10% каждый. Точно так же радиус верхнего правого и нижнего левого угла равен 5em каждый.

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

    Пример :

     


<стиль>
.border_radius22 {
  граница: 2px сплошная прозрачная;
  радиус границы: 50%;
  цвет фона: голубой;
  отступ: 30 пикселей;
  ширина: 100 пикселей;
  высота: 100 пикселей;
}





    

     Граница имеет радиус 50%

    Связанные свойства border-radius:

    Для радиуса верхней левой границы — Свойство border-top-left-radius.
    И радиус верхней правой границы — Свойство — border-top-right-radius.
    Здесь радиус нижней правой границы — Свойство — border-bottom-right-radius.
    Если радиус нижней левой границы — Свойство равно border-bottom-left-radius.

    CSS свойство border-radius — javatpoint

    Это свойство CSS устанавливает скругленные границы и предоставляет скругленные углы вокруг элемента, тегов или div. Он определяет радиус углов элемента.

    Это сокращение для border-top-left-radius, border-top-right-radius, border-bottom-right-radius и border-bottom-left-radius . Придает округлую форму углам границы элемента. Мы можем указать границу для всех четырех углов поля в одном объявлении, используя border-radius. Значения этого свойства могут быть определены в процентах или единицах длины.

    Это свойство CSS включает свойства, которые представлены в следующей таблице:

    Имущество Описание
    граница, верхний левый радиус Используется для установки радиуса границы для верхнего левого угла
    граница верхняя правая радиус Используется для установки радиуса границы для верхнего правого угла
    граница нижняя правая радиус Используется для установки радиуса границы для нижнего правого угла
    край-нижний левый-радиус Используется для установки радиуса границы для нижнего левого угла

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

    Давайте посмотрим, что произойдет, когда мы предоставим этому свойству одно значение, два значения, три значения и четыре значения.

    • Если мы предоставим этому свойству одно значение (, например, border-radius: 30px;) , оно установит для всех углов одинаковое значение.
    • Когда мы указываем два значения (, например, border-radius: 20% 10%;) , то первое значение будет использоваться для верхнего левого и нижнего правого углов, а второе значение будет использоваться для верхний правый и нижний левый углы.
    • Когда мы используем три значения (, например, border-radius: 10% 30% 20%;) , тогда первое значение будет использоваться для верхнего левого угла, второе значение будет применяться в верхнем правом углу, и нижний левый угол, а третье значение будет применено к нижнему правому углу.
    • Точно так же, когда это свойство имеет четыре значения (радиус границы: 10% 30% 20% 40%;) , тогда первое значение будет радиусом верхнего левого угла, второе значение будет использоваться для верхнего правого угла. , третье значение будет применяться в правом нижнем углу, а четвертое значение — в нижнем левом углу.

    Синтаксис

    border-radius: длина 1-4 | % / 1-4 длины | % | наследовать | исходный;

    Стоимость объектов

    длина: Определяет форму углов. Он обозначает размер радиуса с использованием значений длины. Его значение по умолчанию — 0. Отрицательные значения не допускаются.

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

    Пример

    Радиус границы CSS <стиль> div { отступ: 50 пикселей; маржа: 20 пикселей; бордюр: красный гребень 6px; ширина: 300 пикселей; плыть налево; высота: 150 пикселей; } п{ размер шрифта: 25 пикселей; } #один { радиус границы: 90 пикселей; фон: светло-зеленый; } #два { радиус границы: 25% 10%; фон: оранжевый; } #три { радиус границы: 35px 10em 10%; фон: голубой; } #four { радиус границы: 50px 50% 50cm 50em; фон: светло-голубой; }

    Добро пожаловать в javaTpoint.com

    радиус границы: 90 пикселей;

    Добро пожаловать на сайт javaTpoint.com

    радиус границы: 25% 10%;

    Добро пожаловать на сайт javaTpoint.com

    border-radius: 35px 10em 10%;

    Добро пожаловать на javaTpoint.com

    border-radius: 50px 50% 50cm 50em;

    Выход

    Проверить это сейчас

    Теперь давайте посмотрим border-radius для определенных углов.

    Пример — граница-верх-левый-радиус

    Устанавливает радиус границы для верхнего левого угла.

    Радиус границы CSS <стиль> #левый { граница-верх-левый-радиус: 250 пикселей; фон: светло-зеленый; отступ: 50 пикселей; бордюр: красный гребень 6px; ширина: 300 пикселей; высота: 200 пикселей; размер шрифта: 25 пикселей; } <центр>

    Добро пожаловать в javaTpoint.com

    граница-верх-левый-радиус: 250 пикселей;

    Выход

    Проверить это сейчас

    Пример — граница-верх-правый-радиус

    Устанавливает радиус границы для верхнего правого угла.

    <стиль> #левый { граница-верх-правый-радиус: 50%; фон: светло-зеленый; отступ: 50 пикселей; бордюр: красный гребень 6px; ширина: 300 пикселей; высота: 200 пикселей; размер шрифта: 25 пикселей; } <центр>

    Добро пожаловать в javaTpoint.com

    граница-верх-правый-радиус: 50%;

    Выход

    Проверить это сейчас

    Пример — граница-нижний-правый-радиус

    Устанавливает радиус границы для нижнего правого угла.

    <стиль> #левый { граница-нижний-правый-радиус: 50%; фон: светло-зеленый; отступ: 50 пикселей; бордюр: красный гребень 6px; ширина: 300 пикселей; высота: 200 пикселей; размер шрифта: 25 пикселей; } <центр>

    Добро пожаловать в javaTpoint.com

    граница-нижний-правый-радиус: 50%;

    Выход

    Проверить это сейчас

    Пример — граница-нижний-левый-радиус

    Устанавливает радиус границы для нижнего левого угла.

    <стиль> #левый { граница-нижний-левый-радиус: 50%; фон: светло-зеленый; отступ: 50 пикселей; бордюр: красный гребень 6px; ширина: 300 пикселей; высота: 200 пикселей; размер шрифта: 25 пикселей; } <центр>

    Добро пожаловать в javaTpoint.com

    граница-нижний-левый-радиус: 50%;

    Выход

    Проверить это сейчас

    Мы можем указать отдельные значения по горизонтали и по вертикали с помощью символа косой черты (/). Значения перед косой чертой (/) используются для горизонтального радиуса, а значения после косой черты (/) — для вертикального радиуса.

    Ниже приведен пример с использованием символа косой черты (/).

    Пример

    <стиль> div { отступ: 50 пикселей; бордюр: красный гребень 6px; ширина: 300 пикселей; маржа: 20 пикселей; font-weight: жирный; высота: 175 пикселей; плыть налево; размер шрифта: 25 пикселей; } #один { радиус границы: 10% / 50%; фон: светло-зеленый; } #два { радиус границы: 120 пикселей / 100 пикселей 10 пикселей; фон: светло-голубой; } #три { радиус границы: 50% 10em / 10% 20em; фон: светло-розовый; } #four { радиус границы: 100px 10em 120px / 30%; фон: голубой; } <центр>

    Добро пожаловать в javaTpoint.com

    радиус границы: 10% / 50%;

    Добро пожаловать на javaTpoint.com

    радиус границы: 120 пикселей / 100 пикселей 10 пикселей;

    Добро пожаловать на javaTpoint.com

    border-radius: 50% 10em / 10% 20em;

    Добро пожаловать на javaTpoint.com

    border-radius: 100px 10em 120px / 30%;

    Выход

    Проверить это сейчас

    CSS Border-Radius может это сделать?

    Как создавать очень крутые эффекты с помощью редко используемой функции.

    TL / DR : Когда вы используете восемь значений, определяющих радиус границы в CSS, вы можете создавать органично выглядящие формы. ВОТ ЭТО ДА. Нет времени все это читать? — мы сделали для вас наглядный инструмент. Найдите здесь.

    Введение

    Во время конференции Frontend Conference в Цюрихе в этом году Рэйчел Эндрю рассказала о , раскрывающем возможности CSS Grid Layout . В конце своего выступления она упомянула кое-что о старом свойстве CSS, которое застряло у меня в голове:

    «Изображение округлено только с помощью хорошо поддерживаемого border-radius.Не забывайте, что старый CSS все еще существует и полезен. Необязательно использовать что-то необычное для каждого эффекта ». — Рэйчел Эндрю

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

    Освоение border-radius

    Одно значение

    Начнем с основ. Надеюсь, это вас не утомит. Вы, вероятно, знакомы с CSS, и вы также знаете радиус границы.Он существует уже несколько лет, в основном используется с одним значением вроде этого: border-radius: 1em и, возможно, был одной из самых обсуждаемых / любимых функций CSS3 еще в 2010 году, когда css3please.com был вашим лучшим другом.

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

    Как вы можете видеть в приведенном выше примере, рядом со значениями фиксированной длины, такими как пикселей , rem или em , вы также можете использовать проценты. Они в основном используются для создания круга путем установки радиуса границы на 50%.Процентное значение основано на ширине и высоте данного элемента. Поэтому, когда вы используете его на прямоугольнике, у вас больше не будет симметричных углов. Вот пример, показывающий разницу между border-radius: 110px и border-radius: 30% , примененным к прямоугольнику.

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

    Четыре разных значения

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

    Восемь значений, разделенных косой чертой (вот что интересно)

    Я думаю, что большинство из вас уже сделали все, что я объяснил выше. Теперь мы переходим к захватывающей части. Что произойдет, если вы разделите значения косой чертой и укажете до восьми значений? Давайте посмотрим, что об этом говорится в спецификации:

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

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

    Итак, когда вы сравниваете border-radius: 4em 8em с border-radius: 4em / 8em , результаты сильно отличаются.

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

    Формы, которые вы получаете с этим, выглядят немного странно, если честно. Но помните круги, которые вы создаете с радиусом границы : 50% . Вы получаете круг, потому что оба значения, определяющие одну сторону, в сумме составляют 100% (50% + 50% = 100%), и не остается прямой линии, которая напоминает вам исходный квадрат. Если вы примените ту же логику к полному синтаксису радиуса границы с восемью значениями, вы можете создать фигуру, которая немного похожа на плектр или органическую ячейку:

    В конце концов, это четыре перекрывающихся эллипса, которые создают окончательную форму.Легко, ха!

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

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

    НЕОБХОДИМЫЙ РАДИУС ГРАНИЦ

    Не пересекать потоки

    Теперь, когда вы знаете о 8 значениях в целом, вам может быть немного грустно, потому что наш инструмент радиуса границы не дает у вас есть возможность установить каждое значение отдельно… Подождите, вот версия 8-POINT-FULL-CONTROL .

    No related posts.

    Автор записи

    Добавить комментарий

    Ваш адрес email не будет опубликован. Обязательные поля помечены *