Закругление углов в css: border-radius
01.09.2018
В 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; } | Последовательно устанавливает радиус левого верхнего уголка, правого верхнего, правого нижнего и левого нижнего. |
Более подробное создание:
Уроки по CSS3. Часть 5. Закругленные углы border-radius.
<!DOCTYPE HTML> <html lang="ru"> <head> </head> <body> Блок с загруглением 10px </body> </html>
Результат:
Блок с загруглением 10px
CSS. Блоки со скругленными углами.