Circle border for author image

[Jamila-lawal]

Hello all,

I'm currently working on this page, and i'd like to add a circle border to the author image (please see image 1) so that it looks like image 2 (this was created manually).

image 1

image 2

Any advice on this would be greatly appreciated 🙂

Thanks,

Jamila 

[Jaqueline · Accepted solution]

Hi Jamila,

Check the css class of your image or the div around depending on your code. For example in our blog there is an image wrapped in a div like this <div class="sidebar-authorImage"><img...></div> 

Then add this to your CSS:

.sidebar-authorImage {

    border-radius: 100%;

    border: 1px solid #ffffff;

}

Depending on the class you are using, you need to replace the "sidebar-authorImage" with your class. The border in this example is 1px and white. For sure, you can change width and color.

Hope this helps you.

Best ragards,

Jaqueline

[Anonymous · Accepted solution]

Adding a CSS rule like this should do the trick:

.hs-author-avatar img {
border-radius: 50%;
border: 2px solid #000;
}

You can then adjust the width and color for the border declaration. Hope that helps!
--
Bryan Schneidewind
Manager of Web Development
Weidert Group

[Jaqueline · Accepted solution]

Hi Jamila,

Check the css class of your image or the div around depending on your code. For example in our blog there is an image wrapped in a div like this <div class="sidebar-authorImage"><img...></div> 

Then add this to your CSS:

.sidebar-authorImage {

    border-radius: 100%;

    border: 1px solid #ffffff;

}

Depending on the class you are using, you need to replace the "sidebar-authorImage" with your class. The border in this example is 1px and white. For sure, you can change width and color.

Hope this helps you.

Best ragards,

Jaqueline