How to make round corners to both inside of a box and its border?
Inner border calculations
First, you'll need to remove -vendor-background-clip: padding-box
or set them to border-box
the default in order to achieve the inner border radius.
The inner border radius is calculated as the difference of the outer border radius (border-radius
) and the border width (border-width
) such that
inner border radius = outer border radius - border width
Whenever the border-width
is greater than the border-radius
, the inner border radius is negative and you get some awkward inverted corners. Currently, I don't believe there is a property for adjusting the inner-border-radius
, so you'll need to calculate it manually.
In your case:
inner border radius = 6px - 5px = 1px
Your new CSS should be:
.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); }
Simply subtract the border-radius
(6px) values from the border-width
value (5px) in order to achieve your desired inner-border-radius:
Code that works for me
Tested on Firefox 3.x, Google Chrome, and 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 */
Adding color overlays in 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>
I'm not entirely sure how to do hexadecimal arithmetic in JavaScript but I'm sure you can find an algorithm in Google.
Applying General Borders
Are you using a separate box <div>
for your border through its background
property? If so, you'll need to apply border-radius
and its vendor specific properties on both the border box and the inner box:
<div id="border-box" style="border-radius: 5px;">
<div id="inner-box" style="border-radius: 5px;">
</div>
</div>
A much more efficient way would simply have the inner-box manage its own border:
<div id="inner-box" style="border: 4px solid blue; border-radius: 5px">
<!-- Content -->
</div>
CSS-wise, you could just declare a .rounded-border
class and apply it to every box that will have rounded borders:
.rounded-borders {
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-khtml-border-radius: 5px;
}
And apply the class to any boxes that will have rounded borders:
<div id="border-box" class="rounded-borders">
<div id="inner-box" class="rounded-borders">
</div>
</div>
For a single box element, you'll still be required to declare the border size in order to be shown:
<style type="text/css">
#inner-box { border: 4px solid blue; }
</style>
<div id="inner-box" class="rounded-borders">
</div>
CSS - border radius and solid border curved inside
you can use border-radius values as twice the border-size value to obtain inside-rounded corners.
-webkit-border-radius: 16px;
-moz-border-radius: 16px;
border-radius: 16px;
border:white solid 8px;
How do I achieve a thick border with inner border radius only
the simple way: you can have 2 dives
<div class="a">
<div class="b">
</div>
</div>
.b{
display: block;
width: 50px;
height: 50px;
background-color: yellow;
border-radius: 5px;
}
.a{
border: 15px solid;
width: auto;
height: auto;
display: inline-block;
background-color: black;
}
CSS3 rounded corners - only border is rounded, inner box still square
Use two nested divs, both rounded. Simulate border with padding on the wrap.
Here's a fiddle
Related Topics
Difference Between CSS Height: 100% VS Height: Auto
What Is the Purpose of the '@' Symbol in Css
Specify Multiple Attribute Selectors in Css
How to Make a Div Unselectable
How to Insert a Line Break Before an Element Using Css
Css: Fixed Position on X-Axis But Not Y
Css3 Cross Browser Linear Gradient
Wait For Fonts to Load Before Rendering Web Page
How to Delay a :Hover Effect in Css
Responsive CSS Triangle With Percents Width
Svg Use Element and :Hover Style
Why Doesn't the Selector H3:Nth-Child(1):Contains('A') Work
Simulating Transform-Origin Using Translate
Using Rails 3.1 Assets Pipeline to Conditionally Use Certain Css
Css - Overflow: Scroll; - Always Show Vertical Scroll Bar
How to Draw a Circle Sector in Css
How to Build a 2 Column (Fixed - Fluid) Layout With Twitter Bootstrap