How to Achieve Rounded Corners for Both the Inside and Outside of a Box with CSS?

Achieving Rounded Corners for Both the Inside of a Box and Its Border

Background

Creating rounded corners for both the inside and outside of a box can enhance the visual appeal of a design. However, it can be challenging to achieve this effect without affecting the borders of both elements. This guide explores how to achieve this desired effect using CSS.

Inner Border Calculations

To apply rounded corners to the inner box, you need to calculate the inner border radius. This is done by subtracting the border width from the outer border radius.

• Inner Border Radius = Outer Border Radius - Border Width

In this case, with an outer border radius of 6px and a border width of 5px:

• Inner Border Radius = 6px - 5px = 1px

Updated CSS:

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

Applying General Borders

If you're using separate boxes for the border and inner content, apply the border-radius property and its vendor-specific versions to both boxes for consistent rounded corners.

Example (Separate Boxes):

<div>

Example (Single Box):

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

<div>

The above is the detailed content of How to Achieve Rounded Corners for Both the Inside and Outside of a Box with CSS?. For more information, please follow other related articles on the PHP Chinese website!