How to Set Avatar Border Radius on the Post Info Widget of Elementor

As web designers, we surely want our site to have a selling point; uniqueness and stunning design. One thing that we can do is customize the avatar. Many people in the WordPress community assume that customizing the avatar is not the most important thing. But we have another perspective on that. Not only as a representative of who you are, but avatar also can build trust and engagement with your users.

This article will show you how to set the avatar border-radius on the post info widget in Elementor. With Elementor setting the avatar border-radius is very easy.

How to Set Avatar Border Radius on the Post Info Widget in Elementor

Before we start the tutorial, we will inform you that we will use the Elementor Custom CSS feature to set the avatar border-radius. The Elementor Custom CSS is only accessible on Elementor Pro. So, ensure that you’ve already upgraded to the pro version.

Alright, let’s get started!

First, open your Elementor editor, afterward select the Post Info widget from the widget panel, then drag and drop it into the canvas area. By default, the post info displayed four items (Author, Date, Time, and Comments).

Next, we want to activate the avatar. On the Meta Data block, click Author, then navigate to the Avatar option. Please enable the avatar by switching the toggle to YES.

Once you enable the avatar, you can edit and style up your post info widget.

Well, it’s time to set a border-radius avatar by adding the simple snippet into Custom CSS. On the Post Info widget settings, go to the Advanced tab -> Custom CSS. Please copy the CSS snippet below, then paste it into the Custom CSS field.

selector .elementor-avatar
{
    border: 2px solid brown; border-radius: 15px 50px 30px
}

The Code Explanation:

The code above selects the avatar element using the .elementor-avatar selector then applies the styling which is defined between the curly brackets (read: Elementor widget selector list). The avatar border style is solid with brown color (2px solid brown), and it has three values – border-radius: 15px 50px 30px; (first value applies to the top-left corner, the second value applies to top-right and bottom-left corners, and the third value applies to the bottom-right corner).

You can also change the border style, color, and border-radius values by editing the CSS snippet above.

As you can see from the image above, we edited the CSS snippet.

  • Border style: solid -> dashed
  • Border color: brown -> white
  • The third border-radius value (the bottom-right corner): 30px ->25px

The Bottom Line

This article shows how easily you can set the border-radius avatar on the post info widget in Elementor by adding a simple CSS snippet into the Custom CSS. As we mentioned at the beginning of this article, your avatar can build trust and engagement with your users. So, feel free to play around with the CSS snippet above and make your avatar stunning.

This page may contain affiliate links, which help support WP Pagebuilders. Learn more

Leave a Comment

Pin It on Pinterest

Thanks for commenting

Help us grow by sharing this post with your friends!

10+ free Elementor landing page templates. No extra plugin!

Creating with WordPress?​

Subscribe and join 1,500+ WordPress users receiving tips and insights on creating with WordPress in the no-code era. At WP Pagebuilders, we write about the following topics a lot.