Rounded Corners As Well As Shadows For Images Using Css

Here are some unique border styles that yous tin laissez passer on the sack employ to blogger images past times using the border-radius property in addition to defining either all 4 corners simultaneously or applying the rounded border solely to some of them.

One of the advantages of CSS3 is that nosotros tin laissez passer on the sack employ rounded borders without complicating things also much in addition to i of the options would travel to role these edges or borders to images inwards the spider web log posts, to which nosotros tin laissez passer on the sack also add together some hover effects such equally shading in addition to rounded borders accompanied past times transitions.

Note: if yous require 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 in addition to how the images bear when yous hover over them.
If yous desire to role i of these styles, only re-create the code below the image, thus become to Template, click on the Edit HTML push in addition to glue that code earlier ]]> (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 some the epitome */
padding:15px; /* infinite betwixt border in addition to epitome */
-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 some the epitome */
padding:15px; /* The Space Between Border in addition to 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 withdraw 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 employ to all images uploaded to your Blogger posts. But if yous desire to employ them solely on for certain pictures thus modify .post-body img alongside .rounded  in addition to .post-body img:hover alongside .rounded:hover Then add together the rounded cast selector inwards the image's code:

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

These are only some examples, however, yous tin laissez passer on the sack modify them anytime past times adding or deleting to a greater extent than CSS styles, it depends on everybody's tastes or needs. But equally yous convey seen, nosotros tin laissez passer on the sack brand the images expect means to a greater extent than attractive in addition to this has been done solely alongside CSS ;)