border-radius for outline

[o-t-w]

Now that we have accent-color, I would like to use native HTML inputs for most things. One of the reasons I might still build a custom control rather than using the default HTML one is having a border-radius for outline.

People often use a box-shadow to deal with the fact that not all browsers (e.g. Safari) will honor border-radius for outline. This approach does not work for a native HTML radio element - you can set the border-radius to 100% and it will still be square. Using an actual outline rather than box-shadow hack will be a rounded rectangle in Edge & Chrome, not a circle. CodePen example See also example, this Stack Overflow question.