How to Create Rounded Corners for Both the Inner Box and Its Border in CSS?

How to Achieve Rounded Corners for Both the Inner Box and Its Border

In CSS, rounded corners can be applied using the border-radius property, which accepts a value in pixels or percentages. However, when using this property to create rounded corners for both an inner box and its border, it's necessary to consider the effect of the border's width.

Calculating Inner Border Radius

To calculate the inner border radius, subtract the border width from the outer border radius. This ensures that the inner corners of the box have the desired roundness while the border retains its rounded appearance.

For instance, if you want an outer border radius of 6px and a border width of 5px, the inner border radius should be:

inner border radius = 6px - 5px = 1px

Adjusting CSS Code

In the provided code, the following changes should be made:

.radius-all { border-radius: 6px; -moz-border-radius: 6px; -webkit-border-radius: 6px; }

This adjusts the outer border radius to 6px. The background-clip properties should be removed or set to border-box to allow for inner border radius.

.template-bg { background: #FFF; }
.template-border { border: 5px solid rgba(0, 0, 0, 0.2); }

Layering and Borders

If a separate box is being used for the border, the border-radius property must be applied to both the border box and the inner box. Alternatively, a more efficient approach is to manage the border within the inner-box itself.

General Borders

To apply rounded corners to multiple boxes consistently, consider using a class like .rounded-borders and applying it to the relevant elements.

.rounded-borders {
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    -khtml-border-radius: 5px;
}

<div>

The above is the detailed content of How to Create Rounded Corners for Both the Inner Box and Its Border in CSS?. For more information, please follow other related articles on the PHP Chinese website!