# Could we have a thin outline border around the avatar pictures?

**URL:** <https://meta.discourse.org/t/could-we-have-a-thin-outline-border-around-the-avatar-pictures/30333>\
**Category:** UX\
**Created:** [2015年六月22日 20:17 UTC](https://meta.discourse.org/t/could-we-have-a-thin-outline-border-around-the-avatar-pictures/30333 "2015-06-22T20:17:42Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![tommai78101](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/tommai78101/32/116339_2.png) [@tommai78101](https://meta.discourse.org/u/tommai78101)\
**Post date:** [2015年六月22日 20:17 UTC](https://meta.discourse.org/t/could-we-have-a-thin-outline-border-around-the-avatar-pictures/30333/1 "2015-06-22T20:17:43Z")

</div>

There are some avatars that are white in general that some users prefer, and yes it’s an actual 64x64 white avatar. And then there are some who are 1x1 avatars that I know it’s due to an old, but resolved issue.

May I request for a think outline border for the avatars?

---

<div class="post-metadata">

**Author:** ![sam](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/sam/32/102149_2.png) [@sam](https://meta.discourse.org/u/sam)\
**Post date:** [2015年六月22日 20:18 UTC](https://meta.discourse.org/t/could-we-have-a-thin-outline-border-around-the-avatar-pictures/30333/2 "2015-06-22T20:18:55Z")

</div>

With UX topics its best if you post mockups.

As a Discourse forum admin you have complete control over your site’s CSS so, yes you can do so on forums you run.

---

<div class="post-metadata">

**Author:** ![purldator](https://avatars.discourse-cdn.com/v4/letter/p/bcef8e/32.png) [@purldator](https://meta.discourse.org/u/purldator)\
**Post date:** [2015年六月22日 22:13 UTC](https://meta.discourse.org/t/could-we-have-a-thin-outline-border-around-the-avatar-pictures/30333/3 "2015-06-22T22:13:48Z")

</div>

```css
img.avatar {
    border: 1px solid #000000;
}

```

Put that into the HTML/CSS customizations section. (And to everyone else: if I’m incorrect in my guess here for the selector, please correct me.)

EDIT: @DeanMarkTaylor’s post below is a more robust answer to plug into your theme’s current color scheme.

---

<div class="post-metadata">

**Author:** ![DeanMarkTaylor](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/deanmarktaylor/32/102462_2.png) [@DeanMarkTaylor](https://meta.discourse.org/u/DeanMarkTaylor)\
**Post date:** [2015年六月22日 23:36 UTC](https://meta.discourse.org/t/could-we-have-a-thin-outline-border-around-the-avatar-pictures/30333/4 "2015-06-22T23:36:22Z")

</div>

Be aware this has impact on sizes of other elements in the site.

One example is the topic list:  
 ![](https://global.discourse-cdn.com/meta/original/3X/b/3/b37092c02ee8c54fa174f235681dad8ccda6849e.png)

Note how they have slipped onto multiple rows.

The following CSS will resolve this one issue and use a color matching your theme colors as the surround:

```CSS
@import "common/foundation/variables";

img.avatar {
  border: 1px solid dark-light-diff($primary, $secondary, 90%, -75%);
}
.topic-list .posters {
  width: 155px;
  min-width: 155px;
}

```

Will look like so:  
 ![](https://global.discourse-cdn.com/meta/original/3X/f/3/f3a47eb0dd1f153f0559edb4a0d767e3e24d8275.png) ![](https://global.discourse-cdn.com/meta/original/3X/c/d/cd65a907f0d4e7b3777cd1de8e03eee1e250c9eb.png)

---

<div class="post-metadata">

**Author:** ![tommai78101](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/tommai78101/32/116339_2.png) [@tommai78101](https://meta.discourse.org/u/tommai78101)\
**Post date:** [2015年六月23日 19:04 UTC](https://meta.discourse.org/t/could-we-have-a-thin-outline-border-around-the-avatar-pictures/30333/5 "2015-06-23T19:04:34Z")

</div>

I prefer this one, because it looks nicer. Thank you!