Outline radius?

Question

Is there anyway of getting rounded corners on the outline of a div element, similar to border-radius?

Answer 1

You can try using box-shadow like this:

 /* Smooth outline with box-shadow: */

    .text1:focus {

        box-shadow: 0 0 3pt 2pt red;

    }

    /* Hard "outline" with box-shadow: */

    .text2:focus {

        box-shadow: 0 0 0 2pt red;

    }

<input type=text class="text1"> 

<br>

<br>

<br>

<br>

<input type=text class="text2">

Note: You can smoothen the look of the shadow, but the shadow can be hardened to simulate a rounded outline.