Rounded Corners Together With Shadows For Images Using Css

Here are some unique border styles that you lot tin use to blogger images past times using the border-radius property together with defining either all 4 corners simultaneously or applying the rounded border exclusively to some of them.

One of the advantages of CSS3 is that nosotros tin use rounded borders without complicating things every bit good much together with ane of the options would endure to purpose these edges or borders to images inward the weblog posts, to which nosotros tin also add together some hover effects such every bit shading together with rounded borders accompanied past times transitions.

Note: if you lot ask to a greater extent than information virtually how to add together rounded corners on images, follow these links:
- CSS Basics. How to Apply Rounded Corners On Images #1
- CSS Basics. How to Apply Rounded Corners On Images #2

Below are a few examples of these borders together with how the images deport when you lot hover over them.
If you lot desire to purpose ane of these styles, only re-create the code below the image, hence larn to Template, click on the Edit HTML push together with glue that code earlier ]]></b:skin> (CTRL + F to uncovering it)

.post-body img {
border:0;
padding:0;
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
}
.post-body img:hover {
box-shadow: 0px 0px 15px #000; /* Shadow */
border-radius: 50%; /* Rounded border */
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
cursor:pointer;
}

.post-body img {
background:#FFF; /* background color roughly the prototype */
padding:15px; /* infinite betwixt border together with prototype */
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
}
.post-body img:hover {
box-shadow: 0px 0px 15px #000; /* Shadow */
border-radius: 0% 50%; /* Rounded border */
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
cursor:pointer;
}

.post-body img {
background:#FFF; /* the background color roughly the prototype */
padding:15px; /* The Space Between Border together with Image */
border-radius: 50% 0; /* Rounded border */
box-shadow: 0px 0px 15px #000; /* Shadow */
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
}
.post-body img:hover {
border-radius:0; /* This removes the border roundness (value 0) */
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
cursor:pointer;
}

.post-body img {
box-shadow: 0px 0px 15px #000; /* Shadow */
border-radius: 50%; /* Rounded border */
border:0;
padding:0;
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
}
.post-body img:hover {
box-shadow: 0; /* With this nosotros take away the shadow (value 0) */
border-radius: 0; /* This removes the border roundness (value 0) */
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
cursor:pointer;
}

.post-body img {
border-radius: 45% / 20%; /* Rounded border */
box-shadow: 0px 0px 15px #000; /* Shadow */
padding:0;
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
}
.post-body img:hover {
border-radius: 0; /* This removes the roundness of border (value 0) */
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
cursor:pointer;
}

So these effects volition use to all images uploaded to your Blogger posts. But if you lot desire to use them exclusively on for certain pictures hence modify .post-body img amongst .rounded  together with .post-body img:hover amongst .rounded:hover Then add together the rounded aeroplane selector inward the image's code:

<img class="rounded" src="Image URL"/>

These are only some examples, however, you lot tin modify them anytime past times adding or deleting to a greater extent than CSS styles, it depends on everybody's tastes or needs. But every bit you lot bring seen, nosotros tin brand the images await means to a greater extent than attractive together with this has been done exclusively amongst CSS ;)