CODEWITHSUNDEEP
htmlcss
Jurgen Tafaj
Jurgen Tafaj

Reputation: 45

on hover box-shadow inset shows a thin border when its a circle

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>

Upvotes: 0

Views: 354

Answers (1)

Diego D
Diego D

Reputation: 8161

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>

Upvotes: 1

Related Questions