Vấn đè là ta muốn tạo một khung cho văn bản hay khung ảnh mà gốc của khung không phải là gốc vuông mà là gốc bo tròn ( góc vuông bi cắt xén đi phần chốt nhọn ) thì ta làm sao ? CSS sau sẽ giúp bạn làm điều đó .
Demo:<html>
<head>
<style type="text/css">
div#conner {
margin: 0 2%;background:blue;/* mau nay phri giong mau duoi*/
}
b.rtop, b.rbottom {
display:block;background:#FFF;/* mau nay khong thay doi*/
}
b.rtop b, b.rbottom b {
display:block;
height: 1px;
overflow: hidden;
background:blue;/* mau nay phai giong mau tren*/
}
b.r1 {
margin: 0 5px /* le trai +phai = 0, tren +duoi =5 */
}
b.r2 {
margin: 0 3px
}
b.r3 {
margin: 0 2px
}
b.r4 {
margin: 0 1px
}
b.rtop b.r4, b.rbottom b.r4 {
margin: 0 1px;height: 2px
}
</style>
</head>
<body>
<div id="conner" align="center">
<b class="rtop">
<b class="r1"></b>
<b class="r2"></b>
<b class="r3"></b>
<b class="r4"></b>
</b>
<h4> Noi de viet cai khi kho gi do </h4>
<b class="rbottom">
<b class="r4"></b>
<b class="r3"></b>
<b class="r2"></b>
<b class="r1"></b>
</b>
</div>
</body>
</html>
Hình minh họa:
