# Circle border for author image

**URL:** <https://community.hubspot.com/t/circle-border-for-author-image/18578>\
**Category:** CMS Development\
**Tags:** css\
**Created:** [February 5, 2020, 2:22pm UTC](https://community.hubspot.com/t/circle-border-for-author-image/18578 "2020-02-05T14:22:51Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![Jamila-lawal](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/jamila-lawal/32/102945_2.png) [@Jamila-lawal](https://community.hubspot.com/u/Jamila-lawal)\
**Post date:** [February 5, 2020, 2:22pm UTC](https://community.hubspot.com/t/circle-border-for-author-image/18578/1 "2020-02-05T14:22:51Z")

</div>

Hello all,

I’m currently working on [this page](https://app.hubspot.com/design-previewer/2560844/templates/24838410966), 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).

 ![](https://d2qpr2jzcazej7.cloudfront.net/original/3X/6/6/66bd2d0f732fd74722437e14d376ea5f7a7ed594.png)image 1

 ![](https://d2qpr2jzcazej7.cloudfront.net/original/3X/0/a/0ac2197c833852c9d0fe3b8ccae829a102ab14ac.png)image 2

Any advice on this would be greatly appreciated 🙂

Thanks,

Jamila

---

<div class="post-metadata">

**Author:** ![system](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/system/32/124_2.png) [@system](https://community.hubspot.com/u/system)\
**Post date:** [February 5, 2020, 3:27pm UTC](https://community.hubspot.com/t/circle-border-for-author-image/18578/2 "2020-02-05T15:27:31Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![system](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/system/32/124_2.png) [@system](https://community.hubspot.com/u/system)\
**Post date:** [February 5, 2020, 3:54pm UTC](https://community.hubspot.com/t/circle-border-for-author-image/18578/3 "2020-02-05T15:54:24Z")

</div>

Adding a CSS rule like this should do the trick:

```auto
.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](https://www.weidert.com/)