Menu
Is it possible to create an L-shaped border like this using only HTML and CSS?
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/
254
asked Jun 06 '12 21:06
If you want to set a border to just one side of the element, use four values (write none to the side you want no border to appear). If you want to set a border to the top and bottom sides, use two values (write none to the second value).
Curved border in CSS can be done by border-radius property. Border-radius property removes the corners of the elements and replaces with a certain radius. Based on the given border-radius value curved border shape depends. Border-radius values can be in pixels or in percentage.
The key to create smooth border text using a <legend> element is to give it a zero (or small enough) line-height . If it has a large line height, that will displace the position of the border it's in, pushing the border down.
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;
}
Yes.
http://jsfiddle.net/HwKGx/1/
<div id="one">
<div id="two"> </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;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
