Даниэль Отт рассказывает о новом способе создания эффекта скругленных уголков в 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;
}
Полную версию статьи со всеми примерами вы можете найте на сайте Даниэля Отта.