Outline border bottom only

Question

I'd like to create a bottom outline border when the cursor is over an image and I don't know how to do this. I'd like to use this kind of inner border because I don't want to have layout problems with a traditional border-bottom.

Here's my current code, with outline margins everywhere:

.img-lightbox-small {
  width: 110px;
  height: 110px;
  margin: 1px;
}

a img.img-lightbox-small:hover {
  opacity: 1;
  outline: 3px solid #4bb6f5;
  outline-offset: -3px;
}

You could do something like this [DEMO](http://jsfiddle.net/Ruddy/8XjM5/) — Ruddy, May 13 '14 at 08:12

score 52 · Accepted Answer · answered May 13 '14 at 08:15

52

To get around the problem you can use border-bottom, with it set margin-bottom: -1px (the size of the border). This will stop it from moving the content below.

HTML:

<div></div>
test

CSS:

div {
    width: 100px;
    height: 100px;
    background: #eee;
}
div:hover {
    width: 100px;
    height: 100px;
    background: #eee;
    border-bottom: 1px solid;
    margin-bottom: -1px;
}

DEMO HERE

answered May 13 '14 at 08:15

Ruddy

9,795
5
45
66

I'm opened to any other solution. What do you mean by not pretty? – Jeanjean May 13 '14 at 08:22
i just added my answer – valerio0999 May 13 '14 at 08:22
How do you color the border? Mine always shows black – Joe Phillips Oct 28 '17 at 15:47
1

@JoePhillips `border-color: red;` just normal CSS. – Ruddy Oct 29 '17 at 16:38

score 3 · Answer 2 · answered May 13 '14 at 08:22

3

outline is not like the border property. you have all sides, or none. you'd better use the border property mixed with box-sizing:border-box which overwrites the box-model, so that your layout doesnt "move".

http://jsfiddle.net/8XjM5/1/

div {
    width: 100px;
    height: 100px;
    background: #eee;
    box-sizing:border-box;
    -webkit-box-sizing:border-box;
}
div:hover {
    width: 100px;
    height: 100px;
    background: #eee;
    border-bottom: 1px solid;

}

answered May 13 '14 at 08:22

valerio0999

11,458
7
28
56

Ah I see, I didn't go for this as it is using `CSS3`. – Ruddy May 13 '14 at 08:24
I tried this too, but when I apply it my image is moving (size is reducing when a:hover) which is not the case with the other code... See http://jsfiddle.net/8XjM5/4/ (Sorry I didn't know how to use this web site I think I deleted your code *Newbie*) – Jeanjean May 13 '14 at 08:29
img is an inline element , that property only applies to block elements. anyway, even if it is a css3 feature it's widely supported: http://caniuse.com/#search=box-sizing – valerio0999 May 13 '14 at 08:36

Outline border bottom only

2 Answers2