can I define border width. like
.box{
width:200px;
height:100px;
border-bottom:1px solid #000;
}
box width is 200px but i want border width in bottom only 100px.
views:
59answers:
3
+2
A:
No. You'll have to put another element within the .box, which is 100px wide, and apply the border to that.
Matt
2010-06-14 14:12:04
+1
A:
It sounds like you want half a border. Strange, but doable, I think. This is working in Firefox, Chrome, and Safari. MSIE I don't have on hand at the moment, and may cause problems.
The way this works is to have an enclosing box with a background-color that's half as wide, and 1 pixel taller than div.box. I put a background of gray on the body so you can see it working.
<html>
<style type="text/css">
body {
background-color: #ccc;
color: #000;
}
.box-border {
width: 100px; /* half as wide as .box! */
height: 101px; /* just slightly taller than .box! */
background-color: #000;
overflow: visible; /* .box, inside this, can go outside it */
}
.box{
width: 200px;
height: 100px;
background-color: #fff;
}
</style>
<body>
<div class="box-border">
<div class="box">
The quick brown fox jumped over the lazy dog.
</div>
</div>
</body>
</html>
artlung
2010-06-14 19:25:17