Как сделать блок со скруглёнными уголками св помощью CSS3
Можно это сделать с помощью изображений, а можно через стили, для чего используется свойство border-radius
В табл. 1 приведёно разное количество значений и вид блока, который получается при применении того или иного свойства border-radius
| Код |
Описание |
Вид |
| div { border-radius: 10px;} |
Радиус скругления для всех уголков сразу |
Радиус скругления для всех уголков сразу |
| div { border-radius: 0 10px; } |
Первое значение устанавливает радиус левого верхнего и правого нижнего уголка, второе значение - для правого верхнего и левого нижнего |
Первое значение устанавливает радиус левого верхнего и правого нижнего уголка, второе значение - для правого верхнего и левого нижнего |
| div { border-radius: 20px 10px 0; } |
Первое значение задаёт радиус левого верхнего уголка, второе — одновременно правого верхнего и левого нижнего, а третье значение — правого нижнего. |
Первое значение задаёт радиус левого верхнего уголка, второе — одновременно правого верхнего и левого нижнего, а третье значение — правого нижнего. |
| div { border-radius: 20px 10px 5px 0; } |
Последовательно устанавливает радиус левого верхнего уголка, правого верхнего, правого нижнего и левого нижнего. |
Последовательно устанавливает радиус левого верхнего уголка, правого верхнего, правого нижнего и левого нижнего. |
|