Все для создания и продвижения сайтов

Верстка, программирование, SEO

Закругление углов в css: border-radius

количество просмотров 1205
Закругление углов в css: border-radius

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

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

Работа свойства очень просто, рассмотрим на примере:

Код Описание Вид
div {border-radius: 10px;} Радиус скругления для всех уголков сразу.
div {border-radius: 0 10px;} Первое значение устанавливает радиус левого верхнего и правого нижнего уголка, второе значение — для правого верхнего и левого нижнего.
div {border-radius: 15px 10px 0; } Первое значение задаёт радиус левого верхнего уголка, второе — одновременно правого верхнего и левого нижнего, а третье значение — правого нижнего.
div { border-radius: 15px 10px 5px 0; } Последовательно устанавливает радиус левого верхнего уголка, правого верхнего, правого нижнего и левого нижнего.

Более подробное создание:

<!DOCTYPE HTML>
<html lang="ru">
<head>

</head>
<body>
 
Блок с загруглением 10px
</body> </html>

Результат:

Блок с загруглением 10px
Последние статьи

Инструменты

Отблагодарить и поддержать автора
Если вы нашли ошибку, выделите её и нажмите Ctrl+Enter
Выделите опечатку и нажмите Ctrl + Enter, чтобы отправить сообщение об ошибке.