Rounded Corners and Shadows for Images using CSS

Here are some unique border styles that you can apply to your blogger images with the border-radius attribute and instantly define all four corners or apply rounded edges to just some of them.

One of the benefits of CSS3 is that we can apply rounded edges without making things too complicated, and one option is to use these borders or borders for images in blog posts, which allows us to add some pause effects like shadows and add borders. . rounded off, accompanied by an intersection.

Notes. If you need more information on how to add rounded corners to an image, follow these links:
- CSS basics. How to apply rounded corners to n. one
- CSS basics. How to apply rounded corners to n. 2

Here are some examples of these edges and how the image behaves when you walk on it.
If you want to use one of these styles, copy the code below the image, then go to the " Template " section, click the " Edit HTML " button and paste the code first ]]> (CTRL + F to find it)

.img post-body {
edge: 0;
bearing: 0;
-moz transition: all 1s;
- web kit transactions: all 1;
-o-transition: all units;
}
.post-body img: hover {
shadow box: 0px 0px 15px #000; / * Hi * /
radius limit: 50%; /* Rounded edges */
-moz transition: all 1s;
- web kit transactions: all 1;
-o-transition: all units;
pointer: pointer;
}

.img post-body {
background: #FFF; /* background color around image */
padding: 15px; /* space between border and image */
-moz transition: all 1s;
- web kit transactions: all 1;
-o-transition: all units;
}
.post-body img: hover {
shadow box: 0px 0px 15px #000; / * Hi * /
radius limit: 0% 50%; /* Rounded edges */
-moz transition: all 1s;
- web kit transactions: all 1;
-o-transition: all units;
pointer: pointer;
}

.img post-body {
background: #FFF; /* background color around image * /
padding: 15px; /* Distance between edge and image */
border radius: 50% 0; /* Rounded edges */
shadow box: 0px 0px 15px #000; / * Hi * /
-moz transition: all 1s;
- web kit transactions: all 1;
-o-transition: all units;
}
.post-body img: hover {
border radius: 0; /* Remove rounded edges (value 0) */
-moz transition: all 1s;
- web kit transactions: all 1;
-o-transition: all units;
pointer: pointer;
}

.img post-body {
shadow box: 0px 0px 15px #000; / * Hi * /
radius limit: 50%; /* Rounded edges */
edge: 0;
bearing: 0;
-moz transition: all 1s;
- web kit transactions: all 1;
-o-transition: all units;
}
.post-body img: hover {
dia-kuchi: 0; /* This will remove the shadow (value 0) */
border radius: 0; /* Remove rounded edges (value 0) */
-moz transition: all 1s;
- web kit transactions: all 1;
-o-transition: all units;
pointer: pointer;
}

.img post-body {
radius limit: 45% / 20%; /* Rounded edges */
shadow box: 0px 0px 15px #000; / * Hi * /
bearing: 0;
-moz transition: all 1s;
- web kit transactions: all 1;
-o-transition: all units;
}
.post-body img: hover {
border radius: 0; /* Remove rounded edges (value 0) */
-moz transition: all 1s;
- web kit transactions: all 1;
-o-transition: all units;
pointer: pointer;
}

This effect will then be applied to all images uploaded in Blogger posts. But if you only want to apply it to specific images, change .post-body img to .rounded and .post-body img:hover to .rounded:hover. Then add the round class selector to the image code:

class = "round" src = " Print URL " />

These are just a few examples, but you can change them at any time by adding or removing some CSS styles, depending on each person's taste or needs. But as you can see, we can make our images much more interesting, and that's only done with CSS ;)