[Resolved] Images with corners Rounded

[Janine]

Hi, guys.

How can I get my images to have rounded corners:

https://www.w3schools.com/w3css/w3css_images.asp

Link to demo site: http://4dbf4fe2.ngrok.io/

Thank you.

[Janine]

I don’t want corners on the featured images. Thank you.

[Leo]

Hi there,

Add your image like this:
<img src="IMAGE URL HERE" class="rounded-corner">>

with this CSS:

.rounded-corner {
    border-radius: 16px;
}

[Janine]

Hi, Leo.

That’s exactly what I wanted. I changed it to:

<img src="http://stitchingincolour.local/wp-content/uploads/2018/02/clothes-1845375_1920.jpg" />

Just to be clear: Each time I use an image, I will need manually open the WP text editor and edit the HTML as you instructed above. Right?

Also, before I edit as you instructed, this is what was there:

<img src="http://stitchingincolour.local/wp-content/uploads/2018/02/clothes-1845375_1920-1024x682.jpg" alt="" width="1024" height="682" />

There seems to a class defined before. I guess by a plugin.

And alt=”” seems to have no value assigned.

And then it seems to specify the width and height.

Could you explain this to me, please? Thank you.

[Janine]

Oops! I didn’t realize it input the images. Please delete. Thank you.

[Leo]

Yes you will need to manually add in the HTML or edit the HTMl from WordPress as well.

The width and height property are the ones you choose in Add Media. All the info on that is here: https://codex.wordpress.org/Inserting_Media_into_Posts_and_Pages

[Janine]

Thank you, Leo.

[Leo]

No problem!

[Janine]

Leo, two more questions: Re: #496685.

1) What do you mean by “or edit the HTMl from WordPress as well?”

AND

2) When I change this:

<img src=" IMAGE URL HERE " alt="" width="1024" height="682" />

to this:

<img src="IMAGE URL HERE" />

Am I losing something by not specifying alt, width, or height?

Thank you!

[Leo]

1) You can still add the image using Add Media then just add the class in.

2) Alt is the text it would show if the image cannot be loaded. If you don’t specify width and height the full image is added automatically.

[Janine]

Thanks, Leo.

[Leo]

No problem!

[Author]

Posts