Изогнутая угловая граница для div

http://www.curvycorners.net/

Попробуйте эту библиотеку, она сделала для меня чудеса! Это протестированное кросс-браузерное решение.

Вы можете использовать CSS для получения закругленных углов в современных браузерах ...

border-radius: 10px;

Удобный генератор

Это известно как прогрессивное улучшение. IMO, это лучше, чем изображения и / или трюки CSS с полями и границами. Если только у вас не обязательно должны быть закругленные углы.

Если вы хотите полагаться на браузеры webkit и mozilla, вы можете использовать следующие команды css:

.radius {
-moz-border-radius: 6px;
-webkit-border-radius:6px;
border-radius: 6px;
    }

Подробности можно посмотреть здесь.

информацию о спецификации CSS2 border-radius можно найти здесь

К сожалению, они не работают, т.е.

вы можете перейти по маршруту javascript для IE только с помощью niftycube, который имеет дополнительное преимущество поддержки выравнивания высоты столбца без проблем.

Вот один из них, который я написал, и вы можете использовать его, если он вам нравится. Он отображает прямоугольник с закругленными углами любых размеров с цветом фона, но не рамкой вокруг всего поля. Он предназначен для белого фона страницы, но его можно изменить, отредактировав цвет границы в стилях c1, c2 и c3.

.rounded {background-color:#f1f0f1}
.rounded .inner {padding:8px 10px 8px 12px}
.rounded .c1 {height:1px;line-height:1px;font-size:1px;border-width: 0px 4px 0px 4px;border-color:#FFFFFF;border-style:solid;padding:0px}
.rounded .c2 {height:1px;line-height:1px;font-size:1px;display:block;border-width: 0px 2px 0px 2px;border-color:#FFFFFF;border-style:solid;padding:0px}
.rounded .c3 {height:2px;line-height:1px;font-size:1px;display:block;border-width: 0px 1px 0px 1px;border-color:#FFFFFF;border-style:solid;padding:0px}


   <div class = "rounded" style = "width:200px;height:100px">
    <div class = "c1"></div><div class = "c2"></div><div class = "c3"></div>
        <div class = "inner">
        -- Content Here --
        </div>
        <div class = "c3"></div><div class = "c2"></div><div class = "c1"></div>
   </div>

Я бы использовал плагин jQuery для обработки закругленных углов. Вот список доступных плагинов с закругленными углами на сайте jQuery: http://plugins.jquery.com/taxonomy/term/189