Border not showing up

Question

I am pretty new to CSS borders, and i have run into some issues i don't seem to be able to fix. As im new to this, and there is propably many other wondering the same thing (of css newbies). I have this border that should work fine, according to my thinking (might be full of wrong-ish logic). The code i use for the hover and default state is:

.profile-box .opener {
    float:left;
    background: url(http://seek4fitness.net/Design/Gfx/DropDowns/white.on.red/icn_small_black_arrow_down.gif) no-repeat;
        background-position: center center;
        background-color: #fff;
    width:32px;
    height:38px;
    overflow:hidden;
    text-indent:-9999px;
        border-left:1px solid #dde2e8;
}
.profile-box .opener:hover {
    float:left;
    background: url(http://seek4fitness.net/Design/Gfx/DropDowns/white.on.red/icn_small_black_arrow_down.gif) no-repeat;
        background-position: center center;
        background-color: #F0F0F0;
    width:32px;
    height:38px;
    overflow:hidden;
    text-indent:-9999px;
        border-left:1px solid #dde2e8;
}

The issue do not appear to me in any way, and im as said twice, new to css. Please help me with this. It will mean a lot to me. Thanks.

FIDDLE: http://jsfiddle.net/dCe3u/

Answer 1

If you want to apply border to all the four sides you should change

border-left:1px solid #dde2e8;

to

border:1px solid #dde2e8;

FIDDLE HERE

border-left will apply border only to the left side, You can refer more on border here CSS BORDER >>

Answer 2

I just checked your code. I literally copy and paste your code and the border does appear, I think the problem is the color of the border is too light (if you use white background). See the demo http://codepen.io/ImBobby/pen/yicCz. In that demo I intentionally change the border color to red.

I also notice that you declared same style on hover state of .opener element except for the background-color. You might want to change your code into this:

.opener {
    float: left;
    background: url(http://seek4fitness.net/Design/Gfx/DropDowns/white.on.red/icn_small_black_arrow_down.gif) no-repeat;
    background-position: center center;
    background-color: #fff;
    ...
}

.opener:hover {
    background-color: #F0F0F0;
}

short explanation, .opener:hover will inherit styles from opener.