Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Change border groove second color?

Tags:

html

css

I'm using border groove but I need to edit the second color.

border-right: 2px groove #FFFFFF;
border-top: 2px groove #FFFFFF;
like image 685
BZC Avatar asked Nov 29 '13 13:11

BZC


1 Answers

You need some CSS trick to make like groove style, see this:http://jsfiddle.net/LbH92/9/

HTML:

<div class="border">
Hi I have two border colors<br />I am also Fluid
</div>

CSS:

div.border{
    border-right:2px solid #ffffff;
    border-top:2px solid #cccccc; 
    position:relative;
}
div.border:before{
    position:absolute; 
    display:block; 
    content:''; 
    border-right:2px solid #cccccc;
    border-top:2px solid #ffffff; 
    height:100%; 
    width:100%; 
    box-sizing: border-box; 
    -moz-box-sizing: 
    border-box; -webkit-box-sizing: 
    border-box;
    }

Hope will solve problem!

like image 146
Rajiv Ranjan Avatar answered Sep 24 '22 13:09

Rajiv Ranjan