-1

enter image description here

I don't want my outline to have rounded corners, but it becomes rounded while it is getting wider during the animation.

Edit: I'm getting the following appearance in Linux, MS Edge, and looking at your reaction I tried it on Mozilla Firefox, it seems working perfectly that is however I want. But for those who may use MS Edge, is there a solution to apply?

Codepen

.btn {
  width: 20%;
  height: 15%;
  font-size: larger;
  border: none;
  background-color: darkgrey;
  transition: outline-offset 1s;
}

.btn.border-pop:hover {
  outline: solid darkgrey;
  outline-offset: 10px;
}
ibrahim koz
  • 537
  • 4
  • 15
  • 2
    I'm not seeing any rounded outlines in your codepen. What browser are you using? – Kameron Dec 12 '21 at 20:21
  • The button-outline in your Codepen doesn't show any rounded corners for me, on modern Firefox; and none of the CSS you've used in there should cause such a thing. Do you have the problem in the Codepen ? Are you sure it's not added by another (part of your) stylesheet ? I'd recommend using your browsers inspect tool (F12 -> icon on the topleft) to see which CSS statements are applied to it, and from where. (search for outline-radius if there is a lot to go through). – Raxi Dec 12 '21 at 20:28
  • I've added the image of how it appears when it is animated. – ibrahim koz Dec 12 '21 at 20:36
  • using the element inspector have a look at which CSS blocks affect that button, see if any contain anything like `outline-radius` ; or `border-radius`/`outline-`something ; you can toggle those specific statements on/off in the element inspector and use that to find the offending statement. – Raxi Dec 13 '21 at 00:59

1 Answers1

0

Add border-radius: 0; to your button. That is actually the standard design for a border, but you probably set it somewere else.

BeanBoy
  • 326
  • 2
  • 10