How to remove or add image border and shadow to a particular image in blogger

How to remove or add image border and colorful shadows to a particular image in blog

It's for the sites requirement, we need to place pictures in a page. But as per Google Blogger's default css style settings all images are surrounded with default shadow and a frame border. Many a times it looks awkward and as per scripts demand you do not need to have shadow and mainly border around images placed in your blog page. You might have tried to search the web on how to get rid of image border and shadow on a particular picture. All you get - lengthy css script and applicable to all the images. Those nicely written style sheet advises mainly redefines and imply on whole the sites (modifies style sheet effects of the whole site) especially if you are using blogger. Which actually you don't want.

We also require such things but only effective to a particular image, not all of them. Then we have started playing with the css style code and come out with the tiny code to apply within the "image" tag. We have come out with the good result for the reference image as per our requirement. And this is HTML5 compatible.

All you have to do is to apply the below css style within the image tag you wish to remove its border and shadow:

style="border:none; border-style:none;box-shadow:none !important;"

This border-style:none will remove border of the image:

before

after

This box-shadow:none !important will remove shadow from the image.

before

after

If you wish to add stylish border and shadow to your image then you can add below style script to the "image" tag.

This "border-style:dotted; border-color:black;border-width:2px; !important" will will put dotted border around the image:

before

after

You can also replace dotted styles with other image css attributes like dashed/double/groove/ridge/insert/outset as per your requirement.



This "border-style:groove; border-color:black;border-width:2px;border-radius:3em 1em; !important;" will will convert border around the image to a rounded corner:

before

after

This "box-shadow:1em 1em 1em 1em green;!important;" will create an outer shadow to the image.

before

after

This "box-shadow:1em 1em 1em 1em green inset;!important;" display the shadow on inner border of an image:

before

after

Hope this will resolve your issue with the images style for a particular image.

Related topic: CSS Codes to tune up your blog site

Advertisements: