Cree un borde en forma de L utilizando HTML y CSS, ¿es posible?

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

Un borde en forma de L

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

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

Intenta esto: trabajó para mi

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

Sí.

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

 
 
 #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; }​ 

Un poco complicado pero me divertí haciendo 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 el recargo

 

Una opción un poco más compleja, pero útil:

http://dabblet.com/gist/2884899

Se trata de dos elementos hermanos, posicionados en forma absoluta y relativa, con z indexados para desbordarse unos sobre otros. la división superior oculta la parte superior de la división inferior.

Esto es muy útil para los menús desplegables. (Para tener un cuadro con borde, expanda con un menú contextual)

EDITAR (código pegado desde el enlace):

HTML :

 

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; 

}

Para cualquier persona interesada, aquí hay un conjunto de Fieldsets en forma de L:

Código JSFiddler

HTML:

  
Some legend

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

NECRO, en realidad acabo de tener este problema y esta fue la primera publicación que encontré, así que me gustaría agregar algo más, en caso de que alguien más llegue aquí con el problema o si el problema sigue ocurriendo. Usando el edit2 que vinculaste, cambia “radio de borde” con “radio de borde inferior-derecha” esto hace que solo la esquina inferior derecha quede redondeada, arreglando así los bordes extraños redondeados / descoloridos.

También puedes 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.