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

In the last article I explained how to create round images using CSS without modifying one program after another. Now that we've covered the basics of CSS, let's try applying it to some images.

In this tutorial, we will load an image (HTML) and then add some rules to the style sheet so that the outer shape looks like a circle ... or at least looks at a circle. It depends on the size of the square we used.

In fact, we can apply this effect to any image, to a specific section of our blog, or to all images on our blog. It depends on your tastes.

HTML marker

The first thing you need to do to create a circular border around the image is to get the image and click to get the HTML texture. The code might be a little tricky, but the image was created with an img tag, which basically looks like this.

image_url "/>

Screenshot :

By adding this code to the URL of our image in the mail, instead of the blue text, we will display it in the image on the left.

It can often contain alt text and can sometimes have multiple predefined sizes (at a certain width and / or height). When you upload an image using Blogger Post Editor, the code will contain a link to the original image.

But if you want to enhance this image using CSS, you need to add a class selector. We can add it in two ways: to the img account or to the main frame. The name I chose for the image selector is round , but you can add any name.

Rounded corners "src =" URL_image "/>

Rounded corners ">
image_url "/>

Apply force all over the same material

But the voters themselves don't do anything special. It must be accompanied by a law of style on what to do with it. As soon as we add a section, if it is not specified in CSS, the image (or part of it) will not change.

To change the image of all the images in our blog, we need to add it to the CSS.

Figure 1
Border: 2 solid pixels # BADA55;
Net margin 0;
Port 0;
Edge radius: 1000 pixels;
-Mose-radius-edge: 1000 pixels;
A

And how does it translate in your browser?

Look for the img images and apply the following templates.

• 2-pixel deep green border
• Set the margins (out of bounds) and plate (out of bounds) to zero
• Apply rounded corners to the four corners

Now that we have these rules in our stylesheet, we can see the image as we want. Look at the image on the right.

We need to know what works and how to write in order to correctly declare a property, the details can be found on the Internet, even if he is a W3C official.

For example, the boundary radius property must first read four (4) values ​​from left to right, the circle of the top left, top right, bottom right and bottom left corners. If you add a value, all four corners will be equal to that value.

It is important to note that when the limit value exceeds the container size, this limit forms a circle.

How to apply the same formula in the same container

Sometimes we don't want to complete the images on our blog, just the images we choose.We used HTML tags ( img ) instead of selection, so strategies affect all of our images.
To avoid this, let's take a look at one of the things we saw at the beginning of this article : that way only the images in the container with that part will be affected by the rounding rules.

Rounded corners "> image_url "/>

However, the rule does not apply directly to the img tag, but to the rounded corner selector. In this case, you need to enter as follows:

Emission angle.
Border: 2 solid pixels # BADA55;
......
A

This implies that this metaphor only applies to images in angled round containers.

Last word

Remember to finish the lesson on how to create an image with rounded edges.

To solve this problem, we need to add the same width and height dimension (value in pixels), compress the image and make it look like a perfect circle. That's all!

If you want to read this blog, share and subscribe. Please comment below for questions;)