Закругление углов в css: border-radius
4285
В 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
Оставить комментарий