本身是无法实现这样的要求的,但可以利用before或after伪类来“伪造”一个,当然这需要浏览器支持css3:
<style>div {position:relative width:300px height:50px background-color:#bbb padding:4px}
div:before {content:"" position:absolute left:0 top:-2px width:50% height:2px background-color:red}
</style>
<div>请看这个div的“上边框”是只有一半的</div>
修改 width:50% 可以改变边框的长度,修改 height:2px 可以改变边框的宽度
标签或者div是一个矩形而且只能是矩形,所以一共有4条边,而设置单独一条边框是必须与这个边长度或者宽度相等的,最多只能控制边框的粗细或者样式(虚线、实线)而已;你要是想一边长一边短,那就只能用图片来模拟代替了用border-right应该做不到,但可以用其他办法。
你看这是不是你要的效果:
css:
<style>.main {width:400pxheight:300pxmargin: 0 autoborder:1px solid #ccc}
.border {width:10pxheight: 50%background: redfloat: rightposition: relativetop:25%border-radius: 5px}
</style>
html:
<body><div class="main">
<div class="border"></div>
</div>
</body>