CSS анимация Круг HTML, синий круг, синий, текст, логотип png
CSS анимация Круг HTML, синий круг, синий, текст, логотип pngтеги
- синий,
- текст,
- логотип,
- компьютерные обои,
- сфера,
- холст,
- мультфильм,
- обои для рабочего стола,
- электрический Синий,
- конечная,
- небо,
- круги,
- точка,
- начальная,
- линия,
- javaScript,
- область,
- лазурь,
- бренд,
- каскадные таблицы стилей,
- круг,
- диаграмма,
- анимация,
- синий круг,
- CSS анимация,
- HTML,
- png,
- прозрачный,
- бесплатная загрузка
Об этом PNG
- Размер изображения
- 2300x1818px
- Размер файла
- 44.72KB
- MIME тип
- Image/png
изменить размер PNG
ширина(px)
высота(px)
Лицензия
Некоммерческое использование, DMCA Contact Us
51KB
07KB
24MB
org/ImageObject»> Ajax jQuery JavaScript HTML Bootstrap, Ajax, текст, товарный знак, другие png
600x600px
9.58KB
44KB
24KB
org/ImageObject»> Иллюстрация пузырей, Голубое Небо, Плавающая Голубая точка, фиолетовый, синий, текст png
1244x924px
84.39KB
org/ImageObject»> Light Lens flare Рабочий стол, бликовая линза, синий, объектив, объектив камеры png
1920x1481px
288.73KBабсолютные и относительные — Основы CSS — HTML Academy
Загрузка…
Через несколько секунд всё будет готово
- index.
html - style.css
htmlHTML
<!DOCTYPE html>
<html lang=»ru»>
<head>
<meta charset=»utf-8″>
<title>Сайт начинающего верстальщика</title>
<link rel=»stylesheet» href=»style.css»>
</head>
<body>
<header>
<h2>Сайт начинающего верстальщика</h2>
</header>
<main>
<!— Измените ширину у картинки ниже —>
<img src=»img/raccoon.svg» alt=»Аватарка»>
<nav>
<h3>Записи в блоге</h3>
<ul>
<li><a href=»day-1.html»>День первый. Как я забыл покормить кота</a></li>
<li><a href=»day-2.html»>День второй. Хочу быть верстальщиком</a></li>
<li><a href=»day-3.html»>День третий. Мой кот на меня обиделся</a></li>
<li><a href=»day-4.html»>День четвёртый.
Как я чуть не заболел</a></li>
<li><a href=»day-5.html»>День пятый. Отдыхаю</a></li>
<li><a href=»day-6.html»>День шестой. Как я ничего не понял</a></li>
<li><a href=»day-7.html»>День седьмой. Кекс выдал мне задание</a></li>
<li><a href=»day-8.html»>День восьмой. Очень серьёзный</a></li>
<li><a href=»day-9.html»>День девятый. Точнее ночь</a></li>
<li><a href=»day-10.html»>День десятый. Подведение итогов</a></li>
<li><a href=»day-11.html»>День одиннадцатый. Без фанатизма</a></li>
<li><a href=»day-12.html»>День двенадцатый. Все любят печенье</a></li>
<li><a href=»day-13.html»>День тринадцатый. Нашёл статью</a></li>
<li><a href=»day-14.html»>День четырнадцатый.
Новый формат</a></li>
<li><a href=»day-15.html»>День пятнадцатый. Галерея селфи</a></li>
</ul>
</nav>
<section>
<p>Всем привет! Добро пожаловать на мой первый сайт. Ещё недавно я понятия не имел, кто такой верстальщик, а теперь я нашёл <a href=»https://htmlacademy.ru/courses»>тренажёры по HTML и CSS</a> и поставил перед собой цель — стать им. У меня даже появился инструктор — Кекс, который не позволит мне расслабиться и будет следить за моими успехами.</p>
<p>Моё первое задание — вести дневник и честно писать обо всех своих свершениях.</p>
</section>
<section>
Раздел про навыки
</section>
</main>
<footer>
Подвал сайта
</footer>
</body>
</html>
CSS
body {
padding: 0 30px;
font-size: 16px;
line-height: 26px;
font-family: «Arial», sans-serif;
color: #222222;
background: #ffffff url(«img/bg-page.
png») no-repeat top center;
}
h2 {
font-size: 36px;
line-height: normal;
}
h3 {
font-size: 20px;
line-height: normal;
}
a {
color: #0099ef;
text-decoration: underline;
}
/* Поменяйте значение в правиле ниже */
.avatar {
border-radius: 10px;
}
nav {
margin-bottom: 30px;
padding: 20px;
background-color: #4470c4;
border: 5px solid #2d508f;
color: #ffffff;
}
nav a {
color: #ffffff;
}
ul {
list-style: none;
padding-left: 0;
}
footer {
margin-top: 30px;
}
Что в задании вам не понравилось?
Не работает проверка кодаЗадание слишком сложноеНепонятная теорияДругое (сейчас напишу)
Другое (сейчас напишу)
Спасибо! Мы скоро всё исправим)
Код изменился, нажмите «Обновить» или включите автозапуск.
Вы перешли на другую страницу
Кликните внутри мини-браузера, чтобы поставить фокус в это окно.
ЗадачиВыполнено
- В правиле
.avatarпоменяйте значениеborder-radiusна40px, - затем в разметке у картинки
.измените значение атрибута avatarwidthна160. - Для
.avatarснова поменяйте значениеborder-radiusна50%, - а затем верните изначальную ширину
80картинке в разметке.
avatarИспользование свойства CSS Border Radius для создания круга
- Категория сообщения: CSS
Использование свойства CSS Border Radius для создания круга
- Введение
- Что такое радиус границы CSS
- Создать круг
- Четверть круга и полукруг
- Значения радиуса границы
- Заключение
Введение:
Это одно из свойств стиля в CSS, которое помогает настроить кривые вашего изображения или границы. Это в основном для привлечения клиентов и стильного. Это отличное мощное свойство радиуса границы CSS, но иногда его синтаксис может немного сбивать с толку.
Мы знаем, что каждый элемент HTML занимает прямоугольную рамку в окне браузера. Вы можете заметить, что углы прямые.
Что такое радиус границы CSS:
Если вы хотите создать элемент HTML со скругленными углами, воспользуйтесь свойствами радиуса границы CSS. Свойство border-radius позволяет мне скруглять углы. Выберите любое число, которое будет использоваться для всех четырех углов. Он был создан в основном для привлечения клиентов и стильного. Если вы хотите коробку с закругленными углами без острых краев, используйте радиус границы. Коробка имеет четыре угла: верхний левый, верхний правый, нижний левый и нижний правый. Он может нацеливаться на все четыре по отдельности. радиус границы может быть упомянут отдельно, как и свойство границы может быть упомянуто отдельно.
При установке радиуса границы на одно значение. Все углы будут округлены на одно и то же значение. Если это статическое значение, такое как пиксель, вы всегда получите симметричный угол. Но если это проценты, радиус будет основан на ширине и высоте элемента.
Вы также можете использовать специальные свойства угла, такие как граница вверху справа, они эквивалентны, но длиннее для ввода. По умолчанию border-radius будет применять одно и то же значение как к горизонтальному, так и к вертикальному радиусу, но вы также можете добавить косую черту к значению, чтобы управлять ими отдельно. Пример: border-radius: 100px/150px. Мы можем добавить до восьми значений с косой чертой, чтобы создать полную форму. Используя инструменты Mirko и Nils, чтобы упростить задачу, вы можете просто щелкнуть и перетащить каждую точку для управления. Большинство людей используют радиус границы для кнопок и изображений.
У нас есть элемент Div с определенной высотой и шириной, и мы хотели бы стилизовать его угол. Мы можем сделать это с помощью свойства радиуса границы, которое позволяет нам добавить закругленный угол к любому элементу.
Создать круг
Круг {
ширина: 200 пикселей;
высота: 200 пикселей;
цвет фона: красный;
радиус границы: 50%;
отступ: 20 пикселей;
граница: сплошная черная 10px;
поле: 20 пикселей;
} Со свойством радиуса границы только для этого нам нужно дать здесь более сильное значение, на самом деле на этот раз давайте определим другую единицу вместо пикселей, мы можем использовать процент.
Когда мы даем минимальное значение 50% или даже больше, оно полностью скругляет углы со всех сторон. Если мы хотим иметь овальную форму, мы можем увеличить высоту или ширину элемента. Одно единственное значение свойства радиуса границы скругляет все углы элементов.
Но на самом деле их также можно добавлять по одному для каждого угла, для этого также есть сокращение. Сначала позвольте мне показать вам обычную скорость, поэтому, скажем, мы хотим, чтобы это делали только верхние левые углы, поэтому давайте сначала удалим это. Нам нужно выбрать свойство (граница-верхний-левый-радиус) и снова на 50%, что округляет только верхний левый угол поля.
Четверть круга и полукруг
Четверть круга :
.Четверть круга {
ширина: 300 пикселей;
высота: 300 пикселей;
цвет фона: красный;
граница-верхний-левый-радиус: 100%;
граница-верхний-правый-радиус: 0;
граница-нижний-левый-радиус: 0;
граница-нижний-правый-радиус: 0;
} Полукруг :
.
Полукруг {
ширина: 600 пикселей;
высота: 300 пикселей;
цвет фона: красный;
граница-верхний-левый-радиус: 50% 100%;
граница-верхний-правый-радиус: 50% 100%;
граница-нижний-левый-радиус: 0;
граница-нижний-правый-радиус: 0;
} И вы можете легко создать полукруг и четверть круга, используя это свойство. Лучший способ написать код здесь. Сначала мы можем с помощью простых методов кода создать четверть круга. Эти значения ширины и высоты должны соответствовать одному и тому же значению, вы не можете увеличивать или уменьшать значение радиуса верхнего левого края границы, его точное значение равно 100%. Радиус остальных трех углов равен 0. Запустите этот код, и вы увидите, что создается четверть круга.
Далее идет полукруг, он создается для выполнения следующих шагов: Значение высоты должно быть вдвое меньше значения ширины. Радиус верхней левой и правой границы должен составлять 50% 100%. На самом деле это означает, что горизонтальный радиус должен составлять 50% от ширины и будет составлять 600 на два 300.
Здесь 100% означает вертикальный радиус. Вы знаете, что горизонтальный радиус имеет разные значения. Если вы сохраните одно единственное значение, это означает, что вы хотели бы, чтобы они оба были одинаковыми. Единственное значение 50% означает горизонтальный радиус по вертикали. В этом случае 50% от 600 составляет 300. У меня были проценты роста 300 и 300.
Значения радиуса границы:
.values{
радиус границы: 20px 50% 0 50%;
} Существуют также другие свойства для верхнего правого, нижнего правого и нижнего левого угла. Но определение их здесь по одному заполняет наш класс множеством ненужных текстов. Итак, теперь мы можем использовать его короткий конец, если снова определим свойство радиуса границы. Мы можем определить четыре значения для каждого из углов, первое значение равно 20px для верхнего левого угла. Второй для верхнего правого угла составляет 50%, затем идет нижний правый угол, давайте сделаем его равным нулю, и последний для нижнего левого угла, давайте также сделаем его 50%.
Теперь вы можете запустить с помощью любого редактора кода, вы можете видеть, что верхний левый угол слегка закруглен, верхний правый и нижний левый округлены до максимального значения, а нижний правый угол — третье значение здесь не округлено.
Заключение:
Свойство CSS «Радиус границы» дает хорошую гибкость при стилизации элементов в форме прямоугольника в виде кругов, овалов и других форм. Ребята, если вы хотите узнать больше о CSS и веб-разработке, поддержите мой сайт.
| округлено-нет | радиус границы: 0px; |
| округло-см | граница-радиус: 0,125 бэр; /* 2 пикселя */ |
| закругленный | радиус границы: 0,25 бэр; /* 4 пикселя */ |
| закругленный md | радиус границы: 0,375 бэр; /* 6 пикселей */ |
| закругленный-lg | радиус границы: 0,5 бэр; /* 8 пикселей */ |
| округлый-xl | радиус границы: 0,75 бэр; /* 12 пикселей */ |
| закругленный-2xl | радиус закругления: 1 бэр; /* 16 пикселей */ |
| закругленный-3xl | радиус границы: 1,5 бэр; /* 24 пикселя */ |
| закругленный-полный | радиус границы: 9999px; |
| rounded-s-none | border-start-start-radius: 0px; граница-конец-начало-радиус: 0px; |
| закругленный-s-sm | граница-начало-начало-радиус: 0,125 бэр; /* 2 пикселя */ граница-конец-начало-радиус: 0,125 бэр; /* 2 пикселя */ |
| rounded-s | border-start-start-radius: 0. 25rem; /* 4 пикселя */
граница-конец-начало-радиус: 0,25 бэр; /* 4 пикселя */ |
| rounded-s-md | border-start-start-radius: 0.375rem; /* 6 пикселей */ граница-конец-начало-радиус: 0,375 бэр; /* 6 пикселей */ |
| rounded-s-lg | border-start-start-radius: 0.5rem; /* 8 пикселей */ граница-конец-начало-радиус: 0,5 бэр; /* 8 пикселей */ |
| rounded-s-xl | border-start-start-radius: 0,75 бэр; /* 12 пикселей */ граница-конец-начало-радиус: 0,75 бэр; /* 12 пикселей */ |
| rounded-s-2xl | border-start-start-radius: 1rem; /* 16 пикселей */ граница-конец-начало-радиус: 1rem; /* 16 пикселей */ |
| rounded-s-3xl | border-start-start-radius: 1.5rem; /* 24 пикселя */ граница-конец-начало-радиус: 1,5 бэр; /* 24 пикселя */ |
| rounded-s-full | border-start-start-radius: 9999px; радиус конца-начала границы: 9999 пикселей; |
| округлен-е-нет | граница-начало-конец-радиус: 0px; граница-конец-конец-радиус: 0px; |
| округлый-e-sm | граница-начало-конец-радиус: 0,125 бэр; /* 2 пикселя */ граница-конец-конец-радиус: 0,125 бэр; /* 2 пикселя */ |
| закругленный-e | граница-начало-конец-радиус: 0,25 бэр; /* 4 пикселя */ граница-конец-конец-радиус: 0,25 бэр; /* 4 пикселя */ |
| rounded-e-md | border-start-end-radius: 0. 375rem; /* 6 пикселей */
граница-конец-конец-радиус: 0,375 бэр; /* 6 пикселей */ |
| закругленный-e-lg | граница-начало-конец-радиус: 0,5 бэр; /* 8 пикселей */ граница-конец-конец-радиус: 0,5 бэр; /* 8 пикселей */ |
| rounded-e-xl | border-start-end-radius: 0.75rem; /* 12 пикселей */ граница-конец-конец-радиус: 0,75 бэр; /* 12 пикселей */ |
| rounded-e-2xl | border-start-end-radius: 1rem; /* 16 пикселей */ граница-конец-конец-радиус: 1rem; /* 16 пикселей */ |
| rounded-e-3xl | border-start-end-radius: 1.5rem; /* 24 пикселя */ граница-конец-конец-радиус: 1,5 бэр; /* 24 пикселя */ |
| закругленный-и-полный | граница-начало-конец-радиус: 9999px; граница-конец-конец-радиус: 9999px; |
| rounded-t-none | border-top-left-radius: 0px; граница-верхний-правый-радиус: 0px; |
| закругленный-т-см | граница-вверх-влево-радиус: 0,125 бэр; /* 2 пикселя */ радиус верхней правой границы: 0,125 бэр; /* 2 пикселя */ |
| закругленный-t | граница-верхний-левый-радиус: 0,25 бэр; /* 4 пикселя */ радиус верхней правой границы: 0,25 бэр; /* 4 пикселя */ |
| закругленный-t-md | граница-верхний-левый-радиус: 0,375 бэр; /* 6 пикселей */ радиус верхней правой границы: 0,375 бэр; /* 6 пикселей */ |
| закругленный-t-lg | граница-верхний-левый-радиус: 0,5 бэр; /* 8 пикселей */ радиус верхней правой границы: 0,5 бэр; /* 8 пикселей */ |
| закругленный-t-xl | граница-верхний-левый-радиус: 0,75 бэр; /* 12 пикселей */ радиус верхней правой границы: 0,75 бэр; /* 12 пикселей */ |
| rounded-t-2xl | граница-вверху-влево-радиус: 1rem; /* 16 пикселей */ радиус верхней правой границы: 1rem; /* 16 пикселей */ |
| закругленный-t-3xl | граница-верхний-левый-радиус: 1,5 бэр; /* 24 пикселя */ радиус верхней правой границы: 1,5 бэр; /* 24 пикселя */ |
| закругленный-t-полный | граница-верхний-левый-радиус: 9999 пикселей; радиус верхнего правого края: 9999 пикселей; |
| закругленный-r-нет | граница-верхний-правый-радиус: 0px; граница-нижний-правый-радиус: 0px; |
| закругленный-r-sm | граница-вверху-справа-радиус: 0,125 бэр; /* 2 пикселя */ радиус нижнего правого края: 0,125 бэр; /* 2 пикселя */ |
| закругленный-r | граница-вверху-справа-радиус: 0,25 бэр; /* 4 пикселя */ радиус нижнего правого края: 0,25 бэр; /* 4 пикселя */ |
| закругленный-r-md | граница-вверху-справа-радиус: 0,375 бэр; /* 6 пикселей */ радиус нижнего правого края: 0,375 бэр; /* 6 пикселей */ |
| закругленный-r-lg | граница-вверху-справа-радиус: 0,5 бэр; /* 8 пикселей */ радиус нижнего правого края: 0,5 бэр; /* 8 пикселей */ |
| закругленный-r-xl | граница-вверху-справа-радиус: 0,75 бэр; /* 12 пикселей */ радиус нижнего правого края: 0,75 бэр; /* 12 пикселей */ |
| закругленный-r-2xl | бордюр-вверху-справа-радиус: 1 бэр; /* 16 пикселей */ граница-нижний-правый-радиус: 1rem; /* 16 пикселей */ |
| закругленный-r-3xl | бордюр-вверху-справа-радиус: 1,5 бэр; /* 24 пикселя */ радиус нижнего правого края: 1,5 бэр; /* 24 пикселя */ |
| закругленный-r-полный | граница-верхний-правый-радиус: 9999px; граница-нижний-правый-радиус: 9999px; |
| закругленный-b-нет | граница-нижний-правый-радиус: 0px; граница-нижний-левый-радиус: 0px; |
| закругленный-б-см | граница-нижняя-правая-радиус: 0,125 бэр; /* 2 пикселя */ радиус нижнего левого края: 0,125 бэр; /* 2 пикселя */ |
| закругленный-b | граница-нижняя-правая-радиус: 0,25 бэр; /* 4 пикселя */ радиус нижнего левого края: 0,25 бэр; /* 4 пикселя */ |
| закругленный-b-md | граница-нижняя-правая-радиус: 0,375 бэр; /* 6 пикселей */ граница-нижний-левый-радиус: 0,375 бэр; /* 6 пикселей */ |
| закругленный-b-lg | граница-нижняя-правая-радиус: 0,5 бэр; /* 8 пикселей */ радиус нижнего левого края: 0,5 бэр; /* 8 пикселей */ |
| закругленный-b-xl | граница-внизу-справа-радиус: 0,75 бэр; /* 12 пикселей */ граница-нижний-левый-радиус: 0,75 бэр; /* 12 пикселей */ |
| rounded-b-2xl | граница-нижняя-правая-радиус: 1rem; /* 16 пикселей */ граница-нижний-левый-радиус: 1rem; /* 16 пикселей */ |
| rounded-b-3xl | граница-нижняя-правая-радиус: 1,5 бэр; /* 24 пикселя */ радиус нижнего левого края: 1,5 бэр; /* 24 пикселя */ |
| закругленный-b-полный | граница-внизу-справа-радиус: 9999px; радиус нижнего левого края: 9999 пикселей; |
| rounded-l-none | border-top-left-radius: 0px; граница-нижний-левый-радиус: 0px; |
| закругленный-l-sm | граница-верхний-левый-радиус: 0,125 бэр; /* 2 пикселя */ радиус нижнего левого края: 0,125 бэр; /* 2 пикселя */ |
| закругленный-l | граница-вверх-влево-радиус: 0,25 бэр; /* 4 пикселя */ радиус нижнего левого края: 0,25 бэр; /* 4 пикселя */ |
| закругленный-l-md | граница-верхний-левый-радиус: 0,375 бэр; /* 6 пикселей */ граница-нижний-левый-радиус: 0,375 бэр; /* 6 пикселей */ |
| закругленный-l-lg | граница-верхний-левый-радиус: 0,5 бэр; /* 8 пикселей */ радиус нижнего левого края: 0,5 бэр; /* 8 пикселей */ |
| закругленный-l-xl | граница-верхний-левый-радиус: 0,75 бэр; /* 12 пикселей */ граница-нижний-левый-радиус: 0,75 бэр; /* 12 пикселей */ |
| закругленный-l-2xl | граница-верхний-левый-радиус: 1rem; /* 16 пикселей */ граница-нижний-левый-радиус: 1rem; /* 16 пикселей */ |
| закругленный-l-3xl | граница-верхний-левый-радиус: 1,5 бэр; /* 24 пикселя */ радиус нижнего левого края: 1,5 бэр; /* 24 пикселя */ |
| закругленный-l-полный | граница-верхний-левый-радиус: 9999px; радиус нижнего левого края: 9999 пикселей; |
| rounded-ss-none | border-start-start-radius: 0px; |
| rounded-ss-sm | border-start-start-radius: 0. 125rem; /* 2 пикселя */ |
| закругленный-сс | граница-начало-начало-радиус: 0,25 бэр; /* 4 пикселя */ |
| rounded-ss-md | border-start-start-radius: 0.375rem; /* 6 пикселей */ |
| rounded-ss-lg | border-start-start-radius: 0.5rem; /* 8 пикселей */ |
| rounded-ss-xl | border-start-start-radius: 0,75 бэр; /* 12 пикселей */ |
| rounded-ss-2xl | border-start-start-radius: 1rem; /* 16 пикселей */ |
| rounded-ss-3xl | border-start-start-radius: 1.5rem; /* 24 пикселя */ |
| rounded-ss-full | border-start-start-radius: 9999px; |
| rounded-se-none | border-start-end-radius: 0px; |
| закругленный-се-см | граница-начало-конец-радиус: 0,125 бэр; /* 2 пикселя */ |
| закругленный | граница-начало-конец-радиус: 0,25 бэр; /* 4 пикселя */ |
| rounded-se-md | border-start-end-radius: 0. 375rem; /* 6 пикселей */ |
| округленный-se-lg | граница-начало-конец-радиус: 0,5 бэр; /* 8 пикселей */ |
| rounded-se-xl | border-start-end-radius: 0.75rem; /* 12 пикселей */ |
| rounded-se-2xl | border-start-end-radius: 1rem; /* 16 пикселей */ |
| закругленный-se-3xl | граница-начало-конец-радиус: 1,5 бэр; /* 24 пикселя */ |
| rounded-se-full | border-start-end-radius: 9999px; |
| rounded-ee-none | border-end-end-radius: 0px; |
| закругленный-ee-sm | граница-конец-конец-радиус: 0,125 бэр; /* 2 пикселя */ |
| закругленный-ee | граница-конец-конец-радиус: 0,25 бэр; /* 4 пикселя */ |
| округленный-ee-md | граница-конец-конец-радиус: 0,375 бэр; /* 6 пикселей */ |
| закругленный-ee-lg | граница-конец-конец-радиус: 0,5 бэр; /* 8 пикселей */ |
| округленный-ee-xl | граница-конец-конец-радиус: 0,75 бэр; /* 12 пикселей */ |
| округленный-ee-2xl | граница-конец-конец-радиус: 1 бэр; /* 16 пикселей */ |
| rounded-ee-3xl | граница-конец-конец-радиус: 1,5 бэр; /* 24 пикселя */ |
| закругленный-ее-полный | граница-конец-конец-радиус: 9999px; |
| округлено-es-нет | граница-конец-начало-радиус: 0px; |
| rounded-es-sm | border-end-start-radius: 0. 125rem; /* 2 пикселя */ |
| закругленные-es | граница-конец-начало-радиус: 0,25 бэр; /* 4 пикселя */ |
| rounded-es-md | border-end-start-radius: 0.375rem; /* 6 пикселей */ |
| rounded-es-lg | border-end-start-radius: 0.5rem; /* 8 пикселей */ |
| rounded-es-xl | border-end-start-radius: 0.75rem; /* 12 пикселей */ |
| rounded-es-2xl | border-end-start-radius: 1rem; /* 16 пикселей */ |
| rounded-es-3xl | border-end-start-radius: 1.5rem; /* 24 пикселя */ |
| закругленный-es-полный | граница-конец-начало-радиус: 9999px; |
| rounded-tl-none | border-top-left-radius: 0px; |
| округленный-tl-sm | граница-верхний-левый-радиус: 0,125 бэр; /* 2 пикселя */ |
| закругленный-TL | граница-верхний-левый-радиус: 0,25 бэр; /* 4 пикселя */ |
| rounded-tl-md | border-top-left-radius: 0,375rem; /* 6 пикселей */ |
| закругленный-tl-lg | граница-верхний-левый-радиус: 0,5 бэр; /* 8 пикселей */ |
| rounded-tl-xl | граница-вверху-влево-радиус: 0,75 бэр; /* 12 пикселей */ |
| rounded-tl-2xl | border-top-left-radius: 1rem; /* 16 пикселей */ |
| rounded-tl-3xl | border-top-left-radius: 1. 5rem; /* 24 пикселя */ |
| округленный-tl-полный | граница-верхний-левый-радиус: 9999 пикселей; |
| rounded-tr-none | border-top-right-radius: 0px; |
| закругленный-тр-см | граница-вверху-справа-радиус: 0,125 бэр; /* 2 пикселя */ |
| rounded-tr | border-top-right-radius: 0.25rem; /* 4 пикселя */ |
| rounded-tr-md | border-top-right-radius: 0.375rem; /* 6 пикселей */ |
| закругленный-tr-lg | граница-верхний-правый-радиус: 0,5 бэр; /* 8 пикселей */ |
| rounded-tr-xl | border-top-right-radius: 0.75rem; /* 12 пикселей */ |
| rounded-tr-2xl | border-top-right-radius: 1rem; /* 16 пикселей */ |
| rounded-tr-3xl | border-top-right-radius: 1. |