CODEWITHSUNDEEP
htmlcssborder
Michael M.
Michael M.

Reputation: 467

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

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

An L-shaped border

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

Edit2: I'm looking to replicate the picture above -- appropriately curved round corners. This is the main reason I'm having difficulties here: http://jsfiddle.net/cBwh8/1/

Upvotes: 6

Views: 10492

Answers (6)

Jonathan C
Jonathan C

Reputation: 117

NECRO, actually I just had this issue and this was the first post I found, so I'd like to add to it a little, in case someone else lands here with the problem or if the problem is still occurring. Using the edit2 that you linked, change "border-radius" with "border-bottom-right-radius" this makes it so only the bottom right corner ends up being rounded, thus fixing the weird rounded/faded edges.

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

Upvotes: 1

CSharp
CSharp

Reputation: 21

For anyone interested, here's an L-Shaped set of Fieldsets:

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

Upvotes: 2

BlakeGru
BlakeGru

Reputation: 702

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

Upvotes: 5

Rodik
Rodik

Reputation: 4092

A slightly more complex, but useful option:

http://dabblet.com/gist/2884899

This is two sibling elements, absolutely, and relatively positioned, z-indexed to overflow over one another. the top div hides the bottom div's topborder.

This is extra useful for drop down menus. (to have a bordered box, expand with a context menu)

EDIT( code pasted 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;

}

Upvotes: 2

Grigor
Grigor

Reputation: 4049

Try this: 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;
}

Upvotes: 5

maksbd19
maksbd19

Reputation: 3830

Little bit tricky but had fun doing this 

.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 the mark up

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

Upvotes: 2

Related Questions