内边框计算
首先，您需要删除 -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-width 值 (5px) 中减去 border-radius (6px) 值即可获得所需的内边框半径：
适合我的代码
在 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 中找到算法。
应用一般边框
您是否通过其background 属性为您的边框使用单独的框<div>？如果是这样，您需要在边框框和内框上应用 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>
对于单个框元素，您仍需要声明边框大小才能显示：
<style type="text/css">
#inner-box { border: 4px solid blue; }
</style>
<div id="inner-box" class="rounded-borders">
</div>