Inner Border in CSS?

Envato Authors Theme Authors
1

I have Googled for over an hour but still can't find a plain English way to add an inner border to an image in CSS.   I want to use this to add an inside border on hover.

Here's what I tried (it doesn't work):

.list-1 li img:hover { border: 3px double #000; margin: -3px;}

Any ideas please?

2

You can use the inset box-shadow css3 property.

Try something like:

.list-1 li img:hover {
    -moz-box-shadow: inset 0 0 10px #000000;
}

(this will only work on firefox)

Use google for more info and options

3
4

Raspo - I tried that thanks but it doesn’t work.

Qwibbledesigns - thanks but that’s for normal borders (outside) which I am okay with.

Surprised only 2 authors on TF know how to do this. ?

5

I don’t think you can do negative margins on borders for one. Margin as well as border are outside the box model and you can’t do negative padding either. Negative margins will only move it up, down, left or right.

Utilizing Jeffrey’s how-to from nettuts, I just added :hover to the :after pseudo-element and it works for me. When I hover over #box I get a border inside. It works in all new browsers, but not IE6 or IE7.

6

And with an image: http://jsbin.com/elode4/2

7

I noticed you’re trying to use the inset shadow on an IMG element.

There is a bug with img

Maybe, this article will solve your problem

http://www.webdesignerwall.com/tutorials/css3-rounded-image-with-jquery/

8

Thanks everyone, it seems the only way to get a border inside an image on rollover is to try something like @Raspo’s link; trouble is I was looking to have inner borders on each of my portfolio images and with that amount of code for each image just to get an inside border I don’t think it’s worth the time/extra weight in my page(s).
Also, there’s a quirk in my design anyway, even with a normal border the images fall out of their list placements (next to each other)…all in all I can’t be bothered. Another seemingly simple thing that is just too techy and boring :frowning:

9

I know this is probably a geeky thing to do, but if the CSS method is not working, why not do it via PS? Create the imgs with mouseover/mousedown borders, and toss them in with the appropriate code. :expressionless:

10

Couldn’t you just put a transparent GIF of the shadow over the image?

11

There is a clean CSS solution.

Here’s a good article:

I used fixed #1 like so:

.nav a:hover, .nav a.active {
border: 1px solid #FFFFFF;
margin: -1px;
}

Works like a charm. No shifting layout and don’t need shadows, javascript or images.

12

What I do to achieve this effect is:

img { border: 3px solid [#same as bg color]; }
img:hover { border: 3px solid red; }

Works great on a solid background. - Brian

13

Double post :frowning:

14

Surely just using an inner box shadow (CSS3) will sort out this issue?

If you are worried the box will then look smaller on hover (with the inner border) you would have to change the dimensions on hover to increase the width/height of the element by 1px either side OR add a nasty -1px margin on all sides on hover as mentioned by @agentfitz.

15

This may be quite late replay but I found the solution and wanted to share it:

img {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
16

You cannot place an inner shadow on an image because it falls behind the content layer, but above the background layer. You can however wrap the image in a div and set the img zindex to -1 then the shadow will overlay the image.

Or simply wrap the image in a div and use pseudo content to generate a box absolutely positioned over the image and matched to its width height. You cannot do this directly on an image because images cannot have pseudo content.

Both those fixes are pretty simple to implement.

17

Paul Irish has a post on this, boy did it save me a lorra, lorra work

/* apply a natural box layout model to all elements */ *, *:before, *:after { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }

Read this: http://www.paulirish.com/2012/box-sizing-border-box-ftw/

18

You should try this. Best solution i found :

-webkit-box-shadow: 0px 0px 0px 1px #fff;
box-shadow: 0px 0px 0px 1px #fff;

It doesn’t adds any extra pixel.

19

Try this

#your-element {
background: #212127;
outline: 1px dashed #555352;
outline-offset: -6px;
}