Is there any way of getting rounded corners on the outline of a div
element, similar to border-radius
?
23 s
Old question now, but this might be relevant for somebody with a similar issue. I had an input field with rounded border
and wanted to change colour of focus outline. I couldn’t tame the horrid square outline to the input control.
So instead, I used box-shadow
. I actually preferred the smooth look of the shadow, but the shadow can be hardened to simulate a rounded outline:
input, input:focus {
border: none;
border-radius: 2pt;
box-shadow: 0 0 0 1pt grey;
outline: none;
transition: .1s;
}
/* Smooth outline with box-shadow: */
.text1:focus {
box-shadow: 0 0 3pt 2pt cornflowerblue;
}
/* Hard "outline" with box-shadow: */
.text2:focus {
box-shadow: 0 0 0 2pt red;
}
<input class="text1">
<br>
<br>
<input type=text class="text2">