I want to make a circle look smaller but keep its original size.
here you can see the issue I’m having when you hover in the circle. this issues is only when I give the div a 50% radius not when its a square.
I tried to search ways to make a border go inside but didn’t find anything that would solve the issue like box-shadow
https://stackblitz.com/edit/react-sawypr?file=src%2FApp.js,src%2Fstyle.css
h1,
p {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
:root {
--border-width: 10px;
}
body {
background: black;
}
.rreth {
width: 200px;
height: 200px;
background-color: pink;
border-radius: 50%;
box-shadow: 0px 0px 0px 0px black inset;
transition: 0.2s;
/* outline: var(--border-width) solid plum;
outline-offset: var(--border-width); */
}
.rreth:hover {
box-shadow: 0px 0px 0px 30px black inset;
}<div id="root">
<div>
<div class="rreth"></div>
</div>
</div>>Solution :
I added this in your .rreth css rule:
background-clip: content-box;
padding: 1px;
cursor: pointer;
Got inspired here: box-shadow inset leaves dark edge on a div
h1,
p {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
:root {
--border-width: 10px;
}
body {
background: black;
}
.rreth {
width: 200px;
height: 200px;
background-color: pink;
border-radius: 50%;
transition: 0.2s;
background-clip: content-box;
padding: 1px;
cursor: pointer;
}
.rreth:hover {
box-shadow: 0px 0px 0px 30px black inset;
}<div id="root">
<div>
<div class="rreth"></div>
</div>
</div>