CODEWITHSUNDEEP
htmlcssbox
user3047736
user3047736

Reputation:

CSS outer div element with inner box/border stroke

I'm trying to attempt the following. I have a div containing a box with a large border stroke. Here's the code I have been playing with.

.insta{
  background:#000;
  width:820px;
  height:300px;
  margin-left: auto;
  margin-right: auto;
}
.inner-line{
border:10px solid #fff;
width:88%;
height:300px;
position:relative;
right:20;
left:20;
top:20;
bottom:20;
}

<div class="insta"><div class="inner-line"></div></div>

And I get this result,

enter image description here

I'm trying to get to this as the final result,

enter image description here

I know of the box methods CSS provides, but don't know if I can achieve this using that. Any ideas or thoughts?

Upvotes: 0

Views: 3414

Answers (3)

angie_foodcake
angie_foodcake

Reputation: 11

I know this question is very old, but you can use outline offset: http://www.w3schools.com/cssref/tryit.asp?filename=trycss3_outline-offset

Just change the offset to a negative in order to get it inside the container:

outline-offset: -15px;

Upvotes: 0

lpg
lpg

Reputation: 4937

Maybe border type "ridge" is enough...

http://jsfiddle.net/67U9z/1/

.inner-line{
    border:3px ridge white;
    ...

Upvotes: 0

Mathias Rechtzigel
Mathias Rechtzigel

Reputation: 3604

You can use a combination of box-shadow that isn't using a spread or blur and border:

CSS

    border: 10px solid white;
    -webkit-box-shadow: 0px 0px 0px 10px rgba(0,0,0,1);
    -moz-box-shadow: 0px 0px 0px 10px rgba(0,0,0,1);
    box-shadow: 0px 0px 0px 10px rgba(0,0,0,1);

JSfiddle

Upvotes: 1

Related Questions