Crea un borde en forma de L con HTML y CSS, ¿es posible?

Question

¿Es posible crear un borde en forma de L como este usando solo HTML y CSS?

Editar: Eso es lo que tengo en este momento: http://jsfiddle.net/cBwh8/

Edit2: Estoy buscando para replicar la imagen de arriba - apropiadamente esquinas redondeadas curvas. Esta es la razón principal por la que tengo dificultades aquí: http://jsfiddle.net/cBwh8/1/

Answer 1

Prueba esto: trabajó para mí

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

Sí.

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

poco complicado, pero había divertido hacer esto

.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;} 

y la marca hasta

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

Answer 4

A ligeramente más compleja, pero opción útil:

http://dabblet.com/gist/2884899

Esto se dos elementos de hermanos, absolutamente, y relativamente posicionado, z-indexada se desborde una sobre la otra. la parte superior div oculta el extremo superior del div.

Esto es especialmente útil para los menús desplegables.(Para tener una caja de bordeado, ampliar con un menú contextual)

EDITAR (código pegado de enlace):

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

Para todos los interesados, aquí hay un conjunto en forma de L de conjuntos de campos:

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, actualmente sólo tenía este problema y este fue el primer mensaje que encontré, así que me gustaría añadir a ella un poco, en el caso de las tierras de alguien más aquí con el problema o si el problema es todavía está ocurriendo. Usando edit2 que vinculó, cambie "border-radius" por "border-bottom-right-radius", esto hace que solo la esquina inferior derecha termine siendo redondeada, arreglando así los bordes extraños redondeados/descoloridos.

También puede agregar cosas como -moz-border-radius-bottomleft: 10px; -webkit-border-bottom-left-radius: 10px; Si quieres dar más soporte a los navegadores más antiguos.