Для создания нестандартных форм скруглений веб-элементов можно использовать CSS-свойство border-radius. nweb42.com htmlacademy.ru С его помощью можно задавать скругление для всех углов элемента одновременно или для каждого угла по отдельности, а также использовать эллиптические значения для получения более сложных форм. nweb42.com
Некоторые возможности свойства:
- Индивидуальное задание углов. nweb42.com Значения указываются по часовой стрелке, начиная с верхнего левого угла. nweb42.com Можно использовать сокращённые записи: если задать два значения, первое применяется к верхнему левому и нижнему правому углам, а второе — к верхнему правому и нижнему левому. nweb42.com
- Эллиптические углы. nweb42.com Чтобы задать разные значения для горизонтального и вертикального скругления, можно использовать синтаксис с косой чертой. nweb42.com Значения до косой черты задают горизонтальное скругление, а после — вертикальное. nweb42.com
- Скругление в процентах. basecourse.ru Проценты берутся от сторон, образующих угол. basecourse.ru Например, если для левого нижнего угла указать 10%, то на скругление уйдёт 10% нижней части рамки и 10% левой части рамки. basecourse.ru
Кроме того, для создания скруглений можно использовать генераторы круглых краёв, например RoundedCornr, Spiffy Corners, Spanky Corners. habr.com