Скругленные углы CSS

Попробуйте использовать селекторы CSS 3:

.element {
    border-radius:5px
}

Для Safari, Google Chrome (Webkit) и Mozilla используйте следующие два селекторы (хотя Mozilla поддерживает селектор CSS 3, не уверен, поддерживает ли другой):

.element {
    -webkit-border-radius:5px;
    -moz-border-radius:5px;
}

Единственный способ обеспечить поддержку всех браузеров - это использовать фон изображения в тегах привязки, обычно в сочетании с изображением в теге контейнера.

Например, с таким HTML :

<ul>
 <li><a href="">something</a></li>
<ul>

Я бы поместил одно изображение в тег привязки, а другое - на li, чтобы элемент мог иметь переменную ширину и при этом иметь закругленные углы.

Есть функции CSS3 и JS-решения, которые также могут работать, но не полностью совместимы с кроссбраузерностью.

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

Ваши другие параметры, не связанные с изображением, основаны на сценариях, например jQuery Corners или аналогичном сценарии.

У обоих этих методов есть предостережения (поддержка IE, посетители с отключенным JavaScript и т. Д.). Если вы настроены на их использование, я бы сосредоточился на том, чтобы заставить их работать с CSS в браузерах, которые его поддерживают, и просто убедиться, что это выглядит приемлемым без них в IE.

Если вам не нужно работать со всеми браузерами, подумайте об использовании border-radius. См. http://www.css3.info/preview/ounded-border/ для получения дополнительной информации. Новые браузеры на основе Mozilla и Webkit поддерживают либо этот тег, либо moz-border-radius и -webkit-border-radius.

I'm assuming that rounded corner CSS above wouldn't work in IE6. Something you may want to keep in mind.

Three stacked divs with background images is the easiest approach.

<div class="top">&nbsp;</div>
<div class="mid"> <!-- content --> </div>
<div class="bottom">&nbsp;</div>

The background for your div with id mid would be vertically tiled through CSS. Works in IE6.

Я предпочитаю использовать опцию border-radius person-b, о которой говорилось ранее.

Если мне абсолютно необходимо поддерживать IE (т.е. это фундаментальная часть дизайна, а не просто небольшое улучшение), я добился некоторого успеха с dd_Roundies , который использует VML для получения работа сделана.

Вот способ, не зависящий от браузера (о котором я знаю, он работает в популярных браузерах). Он не использует таблицу, поэтому вам придется поместить table в самом глубоко вложенном div, он длинный и тяжелый, но он работает. Изображения, упомянутые в приведенном ниже коде, представляют собой закругленные углы, которые вы рисуете сами. Радиус угла составляет 44 пикселя.

Это вариант: http://www.webcredible.co.uk/user-friendly-resources/css/css-round-corners-boxes.shtml

<div class="tl">
    <div class="tr">
        <div class="bl">
            <div class="br">
                <div class="t">
                    <div class="b">
                        <div class="l">
                            <div class="r">
                                <div>Do or do not, there is no try</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

.tl
{
    font-family: Verdana, Arial;
    font-size: 16px;
    position: relative;
    left: 30px; 
}

.tl, .tr, .bl, .br
{
    width: 655px;
    height: 250px;
}

.t
{
    width: 567px;
    height: 250px;    
    margin: 0 0 0 44px;
}

.b
{
    width: 567px;
    height: 250px;    
}

.l
{
    width: 655px;
    height: 162px;    
    margin: 44px 0 0 -44px; 
}

.r
{
    width: 655px;
    height: 162px; 
}

.bl
{
    background: url(/images/front/rcbla.png) 0 100% no-repeat;
}

.br
{
    background: url(/images/front/rcbra.png) 100% 100% no-repeat;
}

.tl
{
    background: url(/images/front/rctla.png) 0 0 no-repeat;
}

.tr
{
    background: url(/images/front/rctra.png) 100% 0 no-repeat;
} 

.t
{
    background: url(/images/front/adot.png) 0 0 repeat-x;
}

.b
{
    background: url(/images/front/adot.png) 0 100% repeat-x;
}

.l
{
    background: url(/images/front/adot.png) 0 0 repeat-y;
}

.r
{
    background: url(/images/front/adot.png) 100% 0 repeat-y;
}