Думаю, название непонятно, поэтому я объясню. Я пытаюсь добиться такого эффекта:
(прямоугольник с закругленными углами и границей, который также имеет закругленные границы).
Мне удалось это сделать с помощью background-clip
свойство:
(закругленные углы для границы, но не для внутреннего блока)
Вопрос в том, как добиться скругленных углов для внутреннего блока?
Спасибо!
РЕДАКТИРОВАТЬ
HTML, который я использую:
<header class="body template-bg template-border radius-all">
<nav>
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
</ul>
</nav>
</header>
И CSS:
.radius-all {
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}
.template-bg {
background: #FFF;
-moz-background-clip: padding;
-webkit-background-clip: padding;
background-clip: padding-box;
}
.template-border {
border: 5px solid rgba(255, 255, 255, 0.2);
}