Clever Geek Handbook

How to ensure the css border is inside the image

I have an image with an add frame with photoshop, but those borders are messy. I would overwrite this border without doing it again with photoshop (can't use the script because almost all images are too specific) because my client gave me about 15000 images with this error.

Then while I am about css border. So how can I make a border around the image to fill it?

Is it possible? Do you have an idea?

EDIT

List of ideas that don't work for my case:

  • css attribute: border-style: inset (thank you Abdul Basit)
  • css attribute: clip

Thanks in advance.

+3


source to share


2 answers


You can use box-shadow

c inset

to simulate a border. However, the box-shadow does not work directly on the image element because it will be displayed behind.
You can solve this by making class .image-wrapper

with box-shadow

on.
And to make this shadow render in front of your image, you just need to set z-index

to -1

.

* { box-sizing: border-box; }

.img-wrapper {
    box-shadow: inset 0 0 0 20px red; // Fake border on the inside
    display: block;
    margin: 50px auto;
    width: 90%;
}

.img-wrapper img {
    display: block;
    position: relative;
    width: 100%;
    z-index: -1; // Render the image behind the box-shadow
}


Demo

+1


source


you can specify an insert frame

   border-style: inset;

can add width spanning approximately all borders



    border-width: 5px;

or you can use the image as a frame for everyone.

+3


source






More articles:


All Articles