Menu
Is there any way of getting rounded corners on the outline of a div element, similar to border-radius?
491
The outline-radius property is used to specify the radius of an outline. It is used to give rounded corners to outlines. This property can only be used in Firefox2-87 (till march 2021) and from Firefox 88, outline-property follows the shape created by border-radius automatically, so this property is no longer needed.
The border-radius CSS property rounds the corners of an element's outer border edge. You can set a single radius to make circular corners, or two radii to make elliptical corners.
3–4px Radius: This is best and probably the most safe choice. 3–4px is in every point of standard across multi fields, expressing a little bit more friendly and accommodating then 0px.
The border radius of the outer element should be equal to the sum of the border radius of the inner element and the distance between the two elements. This can be mathematically expressed as innerRadius + distance = outerRadius or more tersely R1 + D = R2 .
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">If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
