inner-rounding.md

Inner rounding

?> Background：:point_right: box-shadow, outline

We know that box-shadow will stick to the border-radius rounded edges, but the stroke outline will not fit the rounded edge border-radius, we can combine them. Using box-shadow to fill the gap created by the stroke outline to perform the effect we want.

!>About setting the value of expansion radius? Assuming that the radius of the rounded border-radius is r, according to the Pythagorean theorem, the minimum value of the expansion radius should be equal to (√2−1)r ~= 3.314, and the maximum value cannot exceed the stroke width, which is 6px.

<script v-pre type="text/x-template" id="inner-rounding_tpl"> <style> main{ width: 100%; padding: 60px 80px 80px; } div{ width: 209px; margin: 29px auto; padding: 8px 16px; border-radius: 8px; background: #f4f0ea; outline: 6px solid #b4a078; } input{ margin-left: calc(50% - 45px); } input:checked ~ div{ box-shadow: 0 0 0 5px #b4a078; } </style> box-shadow

A paragraph of filler text. La la la de dah de dah de dah de la.

<script> </script> </script>

Browser Support

<iframe width="100%" height="436px" frameborder="0" src="https://caniuse.bitsofco.de/embed/index.html?feat=css-boxshadow&periods=future_1,current,past_1,past_2,past_3&accessible-colours=false"> </iframe>