CODEWITHSUNDEEP
cssborder
Bakabaka
Bakabaka

Reputation: 1505

Is it possible to have a border be inset into an element, leaving a margin?

I want some of my divs to have a top border, but I want this border to be slightly inset into the element, leaving the top few pixels as-is, with the div content visible there.

Is there a way to do this? I am not looking for a js or jQuery solution.

In the picture below, I'd like the brown part to be a div, with a kind of 4px orange border that is inset OR two borders, one orange and one brown. It needs to be just on top of the element.

enter image description here

Upvotes: 0

Views: 120

Answers (3)

Aprillion
Aprillion

Reputation: 22322

not exactly border, but CSS3 box-shadow can be drawn inside the box with the original-color border outside:

#my_div { 
    width: 200px;
    height: 100px;
    background: brown;
    padding: 10px;
    color: orange;
    border-top: 10px brown solid; 
    box-shadow: inset 0 5px  orange;
}

jsfiddle

Upvotes: 5

cimmanon
cimmanon

Reputation: 68319

If the border is meant to go all the way around the element and not just a specific side, you can use outline for this purpose:

http://tinker.io/95978

h1 {
    background: #CCC;
    outline: 2px solid;
    outline-offset: -8px;
    padding: 10px;
}

<h1>I like borders</h1>

However, the outline-offset property isn't supported in any version of IE.

You could also use a pseudo element to hold the border, which would allow you to specify the border only on specific sides.

http://tinker.io/95978/1

h1 {
    position: relative;
    background: #CCC;
    padding: 10px;
}

h1:before {
    position: absolute;
    top: 4px;
    right: 4px;
    bottom: 4px;
    left: 4px;
    border: 2px solid;
    content: ' ';
    display: block;
}

Should work in IE8+ and pretty much any other browser.

Upvotes: 0

Explosion Pills
Explosion Pills

Reputation: 191749

What you're asking can't be done with a single element because of the box model standard, but it's trivial to do with two elements.

<div class="outer">
    <div class="inner">
        What can I design fo
    </div>
</div>

Just give .outer padding on top and .inner can handle the border.

http://jsfiddle.net/ExplosionPIlls/NGbeB/

Upvotes: 1

Related Questions