[CSS disclosure] border inner fillet

Tip: Use a div tag to achieve rounded corners within borders

Background: Box-shadow, outline, "multiple borders"

Add: Blog Park Editor Border-radius I wrote the properties of the deleted, so see the page effect there is no rounded corners.

The result: A container's border or four corners of the stroke, which have rounded corners inside, while still maintaining a right-angled shape outside.

Realization idea one: through two div nesting can realize

. outer{

Background: #655;

Padding:0.8rem;

}

. inner{

Background:tan;

Border-radius:0.8rem;

Padding:1rem;

}

I have a nice inner rounded border

This approach to implementation is routine, but it can handle complex design requirements. For example, when the color of the outer border is gradient or picture, it can be changed very flexibly.

Realize the idea two: the stroke outline will not follow the rounded corners of the elements, while the Box-shadow will follow the rounded corners of the elements. Combining the two will just take advantage of the Box-shadow feature to fill the gap between the stroke and the container fillet.

Background:tan;

border-radius:10px;

padding:12px;

box-shadow:0 0 0 5px #655;

outline:5px #655 Solid;

I also have a nice inner rounded border

Tips: Future stroke characteristics outline may become like Box-shadow, along with rounded corners. So you need to always keep an eye on the latest CSS dynamics.

Tip: Box-shadow's Spread-radius attribute value can be taken directly to half the Border-radius, so it's easy to calculate.

[CSS disclosure] border inner fillet