Расчеты внутренней границы
Сначала вам нужно удалить -vendor-background-clip: padding-box или установить для них значение border-box по умолчанию, чтобы достичь радиуса внутренней границы.
Радиус внутренней границы рассчитывается как разность радиуса внешней границы (border-radius) и ширины границы (border-width), такая что
inner border radius = outer border radius - border width
Всякий раз, когда border-width больше, чем border-radius, радиус внутренней границы отрицателен, и вы получаете несколько неловких перевернутых углов. В настоящее время я не верю, что есть свойство для настройки inner-border-radius, поэтому вам придется рассчитать его вручную.
В вашем случае:
inner border radius = 6px - 5px = 1px
Ваш новый CSS должен быть:
.radius-all { border-radius: 6px; -moz-border-radius: 6px; -webkit-border-radius: 6px; }
.template-bg { background: #FFF; }
.template-border { border: 5px solid rgba(255, 255, 255, 0.2); }
Просто вычтите значения border-radius (6px) из значения border-width (5px), чтобы получить желаемый радиус внутренней границы:
Код, который работает для меня
Протестировано на Firefox 3.x, Google Chrome и Safari 5.0
.radius-all { border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; }
.template-bg { background: #FFF; }
.template-border { border: 5px solid rgba(0, 0, 0, 0.2); } /* Note that white on white does not distinguish a border */
Добавление цветовых оверлеев в JavaScript
<script type="text/javascript">
var bodyBgColor = document.getElementsByTagName('body')[0].style.backgroundColor;;
// insert opacity decreasing code here for hexadecimal
var header = document.getElementsByTagName('header')[0];
header.style.backgroundColor = bodyBgColor;
</script>
Я не совсем уверен, как выполнять шестнадцатеричную арифметику в JavaScript, но я уверен, что вы можете найти алгоритм в Google.
Применение общих границ
Используете ли вы отдельное поле <div> для своей границы через свойство background? Если это так, вам нужно применить border-radius и его свойства, специфичные для поставщика, как в рамке, так и во внутренней рамке:
<div id="border-box" style="border-radius: 5px;">
<div id="inner-box" style="border-radius: 5px;">
</div>
</div>
Гораздо более эффективный способ, если бы внутренняя коробка управляла собственной границей:
<div id="inner-box" style="border: 4px solid blue; border-radius: 5px">
<!-- Content -->
</div>
С точки зрения CSS, вы можете просто объявить класс .rounded-border и применить его к каждому прямоугольнику с закругленными границами:
.rounded-borders {
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-khtml-border-radius: 5px;
}
И применить класс к любым клеткам, у которых будут закругленные границы:
<div id="border-box" class="rounded-borders">
<div id="inner-box" class="rounded-borders">
</div>
</div>
Для одного элемента box вам все равно потребуется объявить размер границы для отображения:
<style type="text/css">
#inner-box { border: 4px solid blue; }
</style>
<div id="inner-box" class="rounded-borders">
</div>