By mistake, I accidentally created this unique border for an image that I surprisingly find quite appealing.
Take a look at the code snippet below.
The results are truly stunning!
.smoothed {
height: 140px !important;
/* background: red; */
border-radius: 50%;
padding: 10px 3px 38px 1px;
}
html, body { background-color: black; color: white; font-family: sans-serif; }<p>INCREDIBLE OUTCOME</p>
<img src="https://i.pinimg.com/236x/53/f7/45/53f745aad228c9eddb1adc8bd212cca1.jpg" class="smoothed">
<p>NOT SO GOOD RESULT</p>
<img src="https://as2.ftcdn.net/v2/jpg/00/53/72/03/1000_F_53720345_h0zZ8cKmJZyPoKTnn2bsjArj00zn49hc.jpg" class="smoothed">However, the issue lies in its compatibility only with square images.
I also face challenges when trying to place it within a p paragraph or another tag like <h1>, maintaining the same size as the text (specifically pertaining to height).
Could someone assist me in refining the result to ensure it works for all images of any size and can be encapsulated within a tag such as <h1>, effectively displaying the image in a circular form? Feel free to utilize different tags to wrap the img before placing it in h1; the key is functionality.