Turn Square Corners Smoother and More Rounded on Images

Posted on Posted on November 23, 2020, 4:04 am by Kyle Christopher Blanchard (@kylecblanchard).

Modified on Modified on November 23, 2020, 4:04 am by Kyle Christopher Blanchard (@kylecblanchard).

Permalink Permalink/"permanent link" — Turn Square Corners Smoother and More Rounded on Images (https://www.kylecblanchard.net/kylecblanchard/2020/11/23/uncategorized/turn-square-corners-smoother-and-more-rounded-on-images/)

Round images. That’s what this post is about. How to take the traditional squarish, rectangular, oblong photo and turn it circular. Further, how to do this while maintaining the original file to only add the style of rounded corners on the display on the front-end side to give the photo a circular shape. Such images and the image shape I refer to here are popular for profile photos and headers or footers of articles posted with the author’s information, oftentimes with links to their social media, etc.

Similar to the circular photos I am looking to note ways to get rounded corners on elements such as textboxes and square corners to give a curved, softer line to elements. I will look for links to post on it, yet I think it goes that the border radius values need to change and that there are three (the last time I checked) border radius properties to use to cover the currently most used web browsers. Meaning something like “border-radius” and “-webkit-border-radius” and “-moz-border-radius.”