What 'border' can and cannot ..?

[crishushu]

Hi! I am wondering if the same effect (see reduced case below) can be achieved using border? The question goes actually further and target the capabilities of the ‘border’ property in general.
What I have tried so far is commented, note that the lines of the border share the corners of the div box. Alternatively, is there a way to use other css properties but still to rid of the ‘outerbox’ class div.

Best regards

body {
margin: 0 auto;
padding: 0;
width: 570px;
font: 75%/120% Arial, Helvetica, sans-serif;
}

.outerbox {
border-top: solid 4px #422410;
}

.innerbox {
margin: 0 auto;
padding: 0;

/*
border-top: solid;
border-top-width: 4px;
border-top-color: black;

border-left-style: solid;
border-left-width: 208px;
border-left-color: transparent;

border-right-style: solid;
border-right-width: 208px;
border-right-color: transparent;
*/

width: 154px;
height: 40px;
background-color: orange;

}

<div class="outerbox">
 <p class="innerbox"> </p>
</div>

[Paulie_D]

My first question is… “what are you trying to achieve? “

Do you have an image you could share?

[crishushu]

Oh sorry, I just noticed that the HTML code I attached is messed up. Here is a link to the reduced case:

http://liveweave.com/ccMxwP

[Sedana]

I still don’t understand what you want it to look like in the end.

[Paulie_D]

I still don’t understand what you want it to look like in the end.

Ditto

[crishushu]

Hi!

1. there is the orange box generated by:

   <p class="innerbox">

2. there is the black line generated by:

   <div class ="outerbox">

My question is: is there a way to produce the black line by using the border property within the p element in order to make the surrounding div element redundant?

http://liveweave.com/ccMxwP

[Paulie_D]

My question is why would this be required?

I have a feeling that there is more to this than the initial question.

[Sedana]

Something like this: http://liveweave.com/HFIqt1 with the :before selector

[Author]

Posts