CSS Basics. How to Apply Rounded Corners On Images #2

In a previous post, I mentioned that we were going to learn how to create rounded images using CSS without having to edit them separately in the program. Now that we've covered the basics of CSS, let's try applying it to some images.

In this tutorial, we'll load an image (HTML) and then add a few lines to a stylesheet that will turn the outer shape into a round shape...or at least make it round. This will depend on the aspect ratio of the image we are going to use.

In fact, we can apply this effect to any image, to a specific part of our blog, or to all the images that are on our blog. It depends on your taste.

HTML markup

Of course, the first thing we need to do to set a rounded border around an image is to get the image and load it to get the html structure. The code can be a bit more complicated, but the image is inside the img tag, which:

image_url "/>

Screenshot :

By adding this code to the HTML of the post with the image URL instead of the blue text, we can display it like this image on the left.

It can also usually contain alt text and sometimes have predefined dimensions (with a specified width and/or height). When we upload an image using the Blogger post editor, the code will also include a link to the original image.

But if we want to change this image using CSS, we need to add a selector class. We can add it in two ways: in the img tag or in the parent block. The name I chose for the image selection is Rounded Edges , but you can add any name you want:

rounded edges " src=" URL_image "/>

rounded edges">
image_url "/>

Apply the style to all seamless elements

But this selector alone will not do anything special. It should be associated with a style rule that tells you what to do with it. Similarly, if we simply add classes, if they are not defined in CSS, the appearance of the image (or a specific element) will not change.

To reformat all the images on our blog, here's what we need to add to our CSS:

image {
border: 2px solid #BADA55;
field: 0;
upholstery: 0;
border-radius: 1000px;
-moz-border-radius: 1000px;
}

And how does it translate in your browser?

Search for images by the name tag ( img ) and apply this style:

• A solid green border of 2 pixels
• set margins (spaces outside the border) and spaces (spaces inside the border) to zero
• apply rounded edges to all four corners

Since we have this rule in our stylesheet, we can make the image look whatever we want - look at the image on the right.

To declare a property correctly, we need to know what it does and how to write it - details that can be found online, although the W3C is the authority on the matter.

For example, the border-radius property initially requires four (4) values, read from left to right, indicating rounding at the top-left, top-right, bottom-right, and bottom-left corners. If you add one value, all four faces will be equal to that value.

It's important to note that if the value of an edge exceeds the size of the container, that edge will create a circle.

How to apply the same style to elements in the same container

Sometimes we don't want all the images in our blog to be round, just the ones we choose, otherwise adding a top style tag to the header will make all the images round. Previously, we used an HTML tag ( img ) instead of a selector, so the style will affect all of our images.
To avoid this, we can do one of the things we saw at the beginning of this post, which is to put the image in a div class with rounded edges . Therefore, the rounding rule will only affect container images with this class.

rounded edges"> image_url "/>

But then the rule should not directly affect the img tag, but the selector with rounded corners. In this case you should write:

.roundedcorners image {
border: 2px solid #BADA55;
....
}

This means that this style is only applied to images in a container with a rounded border class.

Last words

To complete this tutorial on creating images with rounded edges, note that if they are not square, they will be oval instead of round:

To fix this, we need to add the width and height by the same amount (pixel value) so that the image is cropped and looks perfectly round. That's it!

If you enjoy reading this blog, please share it and subscribe. Any questions please leave a comment below ;)