Border radius still square internally

I have a page that lists some predefined avatars that users can selected, as seen here -

These are defined as follows -

<span class="avatar-box">
<img src="..." class="avatar" style="width: 100px; height: 100px;" />
</span>

.avatar-box
width: 120px;
height: 120px;
text-align: center;
vertical-align: middle;


.avatar
border-radius: 50%;
margin: 10px;



When I click on an avatar, jQuery adds a class of "selected" to "avatar" -

.selected
border: 10px solid #40ac2b !important;



However, when this happens, the following happens on Chrome -

As you can see, while the avatar remains round, the border added is still square. This behaviour does not happen in Firefox, only Chrome.

What can I do to ensure the border remains round, like the avatar itself?

border-radius: 50%;

.selected

selected

avatar

avatar-box

1 Answer
1

Set default border with transparent color, and after hover/active border color changed, because border size effect the size i.e height and width.

Have a look below example.

body
background:#ccc;


.avatar-box
width: 120px;
height: 120px;
text-align: center;
vertical-align: middle;
margin: 10px;


.avatar
border-radius: 50%;
border:10px solid transparent;


.avatar:hover
border:10px solid #ff0000;


<span class="avatar-box">
<img src="https://i.stack.imgur.com/CpldL.png?s=328&g=1" class="avatar" style="width: 100px; height: 100px;" />
</span>

Required, but never shown

Required, but never shown

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.