Закругленные углы — одна из популярных тенденций в современном веб-дизайне. Есть множество вариантов их реализации: от размещения изображений по углам контейнера, до использования специфических свойств, например -moz-border-radius для FireFox. Хотелось бы иметь в арсенале простой и удобный способ скругления углов без использования изображений или экзотических свойств.
Плагин jquery.corner.js для библиотеки jQuery — самый простой способ для решения этой задачи. Подключаем плагин в разделе head HTML-страницы:
<script type="text/javascript" src="/jquery.js"></script>
<script type="text/javascript" src="/jquery.corner.js"></script>
И вызываем функцию corner():
$("div.rounded").corner("effect corners width");
effect — название эффекта, например round или bevel. По умолчанию — round.
corners — углы, к которым применяется эффект. Может принимать значения top (верхние правый и левый), bottom (нижние правый и левый), tr (верхний правый), tl (верхний левый), br (нижний правый) или bl (нижний левый). По умолчанию эффект применяется ко всем углам.
width — радиус скругления (ширина эффекта) в пикселях. По умолчанию — 10px.
Поскольку для effect, corners и width предусмотрены значения по умолчанию, допускается вызвать функцию corner() так:
$("div.rounded").corner();
