How to remove an outline when using an insert shadow and frame radius
So I have a div that has border-radius
both an insert box-shadow
, however, the insert box-shadow
doesn't seem to propagate to the edges of the div and results in a weak structure in the original case.
Is there a way to make it box-shadow
spread out completely to cover the whole div?
div {
height: 100px;
width: 100px;
background-color: red;
border-radius: 50%;
box-shadow: inset 0px 0px 0px 10px white
}
<div></div>
(The browsers I found this with refer to Chrome and IE10 so far)
source to share
Can't you achieve the same result with just a simple border and box-sizing:border-box
?
div {
box-sizing:border-box;
height: 100px;
width: 100px;
background-color: red;
border-radius: 50%;
border:10px solid white;
cursor:pointer;
}
<div></div>
source to share
box-shadow
You can use instead border
. But since box-shadow
- inset
, border
cannot be set on an element, but a pseudo-element will ::before
do the trick:
div {
height: 100px;
width: 100px;
position: relative;
}
div:before {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left:0;
z-index: -1;
border-radius: 50%;
border: 10px solid white;
background-color: red;
}
body {
background: yellow;
}
#fixed {
height: 100px;
width: 100px;
position: relative;
}
#fixed:before {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left:0;
z-index: -1;
border-radius: 50%;
border: 10px solid white;
background-color: red;
}
#problem{
height: 100px;
width: 100px;
background-color: red;
border-radius: 50%;
box-shadow: inset 0px 0px 0px 10px white;
}
<div id="fixed">Foo bar baz</div>
<div id="problem">Foo bar baz</div>
source to share