htmlcsswebkitborderpressed

Pressed border CSS

Having a very simple and kinda embarrasing problem to be honest. I just can't seem to figure out how to achieve the border effect in the follwing picture:

http://cdn.churchm.ag/wp-content/uploads/2011/09/indented.png

I've tried so many different things, and even spent way too long, using webkit-border-image, to try an achieve the effect trough an external jpg file I had created in photoshop, LOL.

Anyways, I'm here seeking for guidance, all I need is the snippet of code that will achieve top/bottom/left/right borders as in the image.

And to be even more anoying, I would kindly ask that the border would be the following basecolor: #4b5ed6.

If you don't get what I'm looking for look up: http://www.bet365.dk/ I want to create the same effect of the border as they have on the wrapper with the background color being #6779e8 and the border looking pressed as on their site.

In advance - Thank you!

Solution

  • It can be achieved by using <hr>:

    text
<hr>
text
<hr>
text

    Or inset border:

    .myBorder{
   border:inset 1px; 
}
    text
<div class="myBorder"></div>
text
<div class="myBorder"></div>
text

    Note that in case with inset border, you can also customize its width or color:

    .myBorder{
   border:inset 2px; 
   border-color:green;
}
    text
<div class="myBorder"></div>
text
<div class="myBorder"></div>
text