АяксЛайн.ру

Даниэль Отт рассказывает о новом способе создания эффекта скругленных уголков в CSS. Вот один из примеров:

HTML

<div class=”b_greyWhiteStroke”>
        <div class=”TL”></div>
        <div class=”BL”></div>
        <div class=”TR”></div>
        <div class=”BR”></div>
        <div class=”b_innerContainer”>
                <h2>This Is A Block</h2>
                <p> Lorem ipsum dolor sit amet…</p>
        </div>
</div>

CSS3

.b_greyWhiteStroke{
        position: relative;
        border-color: #dce3e7;
}

.TL, .BL, .TR, .BR{
        width: 6px;
        height: 6px;
        position: absolute;
        background-repeat: no-repeat;
        background-color: transparent;
        z-index: 9999 !important;
}

.TL{
        top:0;
        left:0;
}
.BL{
        bottom: 0;
        left: 0;
}
.TR{
        top:0;
        right:0;
}
.BR{
        bottom: 0;
        right: 0;
}

.b_greyWhiteStroke .TL{
        background-image: url(images/grey_whitestroke_tl.png);
}
.b_greyWhiteStroke .BL{
        background-image: url(images/grey_whitestroke_bl.png);
}
.b_greyWhiteStroke .TR{
        background-image: url(images/grey_whitestroke_tr.png);
}
.b_greyWhiteStroke .BR{
        background-image: url(images/grey_whitestroke_br.png);
}

.b_innerContainer{
        border-width: 1px;
        border-style: solid;
        padding: 2px 2px 8px;
}

.b_greyWhiteStroke .b_innerContainer{
        border-color: #dce3e7;
}

Полную версию статьи со всеми примерами вы можете найте на сайте Даниэля Отта.