Create an L-shaped border using HTML and CSS, is this possible?

Question

Is it possible to create an L-shaped border like this using only HTML and CSS?

Edit: This is what I have at the moment: http://jsfiddle.net/cBwh8/

Edit2: I want to reproduce the picture above - the corresponding curved round corners. This is the main reason I am having difficulty: http://jsfiddle.net/cBwh8/1/

Answer 1

Try the following: worked for me

div.outer { margin: 10px; width: 200px; height: 200px; border: 1px solid blue; border-radius: 10px; } div.inner { width: 160px; height: 160px; border-right: 1px solid blue; border-bottom: 1px solid blue; margin-top:-1px; margin-left:-1px; background:#FFF; } 

Answer 2

Yes.

http://jsfiddle.net/HwKGx/1/

 <div id="one"> <div id="two">&nbsp;</div> </div> 

 #one { margin:10px; width:45px; height:75px; border:2px solid #333; } #two{ float:left; width:35px; height:65px; border-width:2px; border-style:solid; margin:-2px 0 0 -2px; border-color:#FFF #333 #333 #FFF; }​ 

Answer 3

A little harder, but I did it with pleasure

 .left{float:left} .right{float:right} #container{border-right:1px solid #000;border-bottom:1px solid #000;width:300px;height:300px;margin:100px auto;} #leftBox{width:70%;height:69%;border-right:1px solid #000;border-bottom:1px solid #000;} #leftBox2{border-left:1px solid #000;width:100%;height:29%;} #rightBox{width:29%;height:70%;border-top:1px solid #000;} 

and mark

 <div id="container"> <div id="leftBox" class="left"></div> <div id="rightBox" class="right"></div> <div id="leftBox2" class="left"></div> 

Answer 4

A bit more complicated but useful option:

http://dabblet.com/gist/2884899

These are two elements of the brother, absolutely and relatively positioned, z-indexed to overflow one another. the top div hides the bottom top border of the div.

This is useful for drop down menus. (to have a frame with a frame, expand it using the context menu)

EDIT (code inserted from link):

HTML

 <div class="holder"> <div class="top"></div> <div class="bottom"></div> </div> 

CSS

 .holder{ position:relative; } .top{ width: 50px; height:50px; background:red; border:blue solid 2px; border-bottom:none; position:relative; z-index:4; } .bottom{ z-index:2; width: 100px; height: 100px; position:absolute; top:50px; left:0; border: blue solid 2px; background:red; 

}

Answer 5

For everyone who is interested, here is an L-shaped set of fields:

JSFiddler Code

HTML:

  <div> <fieldset class="topPortion"> <legend>Some legend</legend> <input type="text" value="Foo" /> <input type="submit" value="Submit" /> </fieldset> <fieldset class="bottomPortion"> <input type="text" value="Foo" /> <input type="submit" value="Submit" /> </fieldset> </div> 

CSS

 fieldset.topPortion { border: 1px solid red; border-bottom: 0; /*top: 20px;*/ padding: 5px 5px; position: relative; width: 250px; z-index: 100; background-color: yellow; top: 1px; border-radius: 5px 5px 0 0; } fieldset.bottomPortion { border: 1px solid red; width: 500px; height: 100px; position: absolute; z-index: 1; margin-top: -10; padding: 5px 10px; background-color: yellow; border-radius: 0 5px 5px 5px; } 

Answer 6

NECRO, I actually had this problem, and this was the first post I found, so I would like to add a little to it if someone lands here with the problem or if the problem is still happening. Using edit-related2, change “border-radius” to “border-bottom-right-radius”, this makes only the lower right corner end with rounded, thereby fixing strange rounded / faded edges.

You can also add things like -moz-border-radius-bottomleft: 10px; -webkit-border-bottom-left-radius: 10px; If you want to support older browsers more.