Rounded Corners As Well As Shadows For Images Using Css

Here are some unique border styles that yous tin utilise to blogger images past times using the border-radius property too defining either all 4 corners simultaneously or applying the rounded border alone to some of them.

One of the advantages of CSS3 is that nosotros tin utilise rounded borders without complicating things besides much too ane of the options would hold out to purpose these edges or borders to images inwards the spider web log posts, to which nosotros tin also add together some hover effects such equally shading too rounded borders accompanied past times transitions.

Note: if yous necessitate to a greater extent than information well-nigh 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 too how the images comport when yous hover over them.
If yous desire to purpose ane of these styles, merely re-create the code below the image, too hence larn to Template, click on the Edit HTML push clit too glue that code earlier ]]></b:skin> (CTRL + F to detect 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 too 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 too 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 utilise to all images uploaded to your Blogger posts. But if yous desire to utilise them alone on for certain pictures too hence alter .post-body img amongst .rounded  too .post-body img:hover amongst .rounded:hover Then add together the rounded course of report selector inwards the image's code:

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

These are merely some examples, however, yous 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 equally yous accept seen, nosotros tin brand the images hold off agency to a greater extent than attractive too this has been done alone amongst CSS ;)

Share this post