方法一
閱讀代碼編輯代碼運行效果複製HTML代碼保存代碼
<html><head>
<title>css圓角效果</title>
<meta http-equiv="content-type" content="text/html; charset=gb2312">
<style type="text/css">
div.RoundedCorner{background: #9BD1FA}
b.rtop, b.rbottom{display:block;background: #FFF}
b.rtop b, b.rbottom b{display:block;height: 1px;overflow: hidden; background: #9BD1FA}
b.r1{margin: 0 5px}
b.r2{margin: 0 3px}
b.r3{margin: 0 2px}
b.rtop b.r4, b.rbottom b.r4{margin: 0 1px;height: 2px}
</style>
</head><body>
<div class="RoundedCorner">
<b class="rtop"><b class="r1"></b><b class="r2"></b><b class="r3"></b><b class="r4">
</b></b><br>
無圖片實現圓角框<br>
<br>
<b class="rbottom"><b class="r4"></b><b class="r3"></b><b class="r2"></b><b class="r1">
</b></b>
</div>
</body></html><html><head>
<title>css圓角效果</title>
<meta http-equiv="content-type" content="text/html; charset=gb2312">
<style type="text/css">
div.RoundedCorner{background: #9BD1FA}
b.rtop, b.rbottom{display:block;background: #FFF}
b.rtop b, b.rbottom b{display:block;height: 1px;overflow: hidden; background: #9BD1FA}
b.r1{margin: 0 5px}
b.r2{margin: 0 3px}
b.r3{margin: 0 2px}
b.rtop b.r4, b.rbottom b.r4{margin: 0 1px;height: 2px}
</style>
</head><body>
<div class="RoundedCorner">
<b class="rtop"><b class="r1"></b><b class="r2"></b><b class="r3"></b><b class="r4">
</b></b><br>
無圖片實現圓角框<br>
<br>
<b class="rbottom"><b class="r4"></b><b class="r3"></b><b class="r2"></b><b class="r1">
</b></b>
</div>
</body></html>
如圖：![]()
方法二
閱讀代碼編輯代碼運行效果複製HTML代碼保存代碼
<table style="table-layout: fixed" height="28" cellspacing="0" cellpadding="0" width="100%"
border="0">
<tbody>
<tr height="3" width="100%">
<td>
<table style="table-layout: fixed" height="3" cellspacing="0" cellpadding="0" width="100%"
border="0">
<tbody>
<tr height="1">
<td width="1"></td>
<td width="1"></td>
<td width="1"></td>
<td bgcolor="#908a47"></td>
<td width="1"></td>
<td width="1"></td>
<td width="1"></td>
</tr><tr height="1">
<td></td>
<td bgcolor="#908a47" colspan="2"></td>
<td bgcolor="#f7f8f9"></td>
<td bgcolor="#908a47" colspan="2"></td>
<td></td>
</tr><tr height="1">
<td></td>
<td bgcolor="#908a47"></td>
<td bgcolor="#f7f8f9" colspan="3"></td>
<td bgcolor="#908a47"></td>
<td></td>
</tr>
</tbody>
</table>
</td>
</tr><tr>
<td>
<table style="table-layout: fixed" height="100%" cellspacing="0" cellpadding="0"
border="0">
<tbody>
<tr>
<td width="1" bgcolor="#908a47"></td>
<td id="oINNER" bgcolor="#f7f8f9"> </td>
<td width="1" bgcolor="#908a47"></td>
</tr>
</tbody>
</table>
</td>
</tr><tr height="3" width="100%">
<td>
<table style="table-layout: fixed" height="3" cellspacing="0" cellpadding="0" width="100%"
border="0">
<tbody>
<tr height="1">
<td width="1"></td>
<td width="1" bgcolor="#908a47"></td>
<td width="1" bgcolor="#f7f8f9"></td>
<td bgcolor="#f7f8f9"></td>
<td width="1" bgcolor="#f7f8f9"></td>
<td width="1" bgcolor="#908a47"></td>
<td width="1"></td>
</tr><tr height="1">
<td></td>
<td bgcolor="#908a47" colspan="2"></td>
<td bgcolor="#f7f8f9"></td>
<td bgcolor="#908a47" colspan="2"></td>
<td></td>
</tr><tr height="1">
<td colspan="3"></td>
<td bgcolor="#908a47"></td>
<td colspan="3"></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table><table style="table-layout: fixed" height="28" cellspacing="0" cellpadding="0" width="100%"
border="0">
<tbody>
<tr height="3" width="100%">
<td>
<table style="table-layout: fixed" height="3" cellspacing="0" cellpadding="0" width="100%"
border="0">
<tbody>
<tr height="1">
<td width="1"></td>
<td width="1"></td>
<td width="1"></td>
<td bgcolor="#908a47"></td>
<td width="1"></td>
<td width="1"></td>
<td width="1"></td>
</tr><tr height="1">
<td></td>
<td bgcolor="#908a47" colspan="2"></td>
<td bgcolor="#f7f8f9"></td>
<td bgcolor="#908a47" colspan="2"></td>
<td></td>
</tr><tr height="1">
<td></td>
<td bgcolor="#908a47"></td>
<td bgcolor="#f7f8f9" colspan="3"></td>
<td bgcolor="#908a47"></td>
<td></td>
</tr>
</tbody>
</table>
</td>
</tr><tr>
<td>
<table style="table-layout: fixed" height="100%" cellspacing="0" cellpadding="0"
border="0">
<tbody>
<tr>
<td width="1" bgcolor="#908a47"></td>
<td id="oINNER" bgcolor="#f7f8f9"> </td>
<td width="1" bgcolor="#908a47"></td>
</tr>
</tbody>
</table>
</td>
</tr><tr height="3" width="100%">
<td>
<table style="table-layout: fixed" height="3" cellspacing="0" cellpadding="0" width="100%"
border="0">
<tbody>
<tr height="1">
<td width="1"></td>
<td width="1" bgcolor="#908a47"></td>
<td width="1" bgcolor="#f7f8f9"></td>
<td bgcolor="#f7f8f9"></td>
<td width="1" bgcolor="#f7f8f9"></td>
<td width="1" bgcolor="#908a47"></td>
<td width="1"></td>
</tr><tr height="1">
<td></td>
<td bgcolor="#908a47" colspan="2"></td>
<td bgcolor="#f7f8f9"></td>
<td bgcolor="#908a47" colspan="2"></td>
<td></td>
</tr><tr height="1">
<td colspan="3"></td>
<td bgcolor="#908a47"></td>
<td colspan="3"></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
如圖所顯示：![]()
閱讀代碼編輯代碼運行效果複製HTML代碼保存代碼
<html><head>
<title>css圓角效果</title>
<meta http-equiv="content-type" content="text/html; charset=gb2312">
<style type="text/css">
div.RoundedCorner{background: #9BD1FA}
b.rtop, b.rbottom{display:block;background: #FFF}
b.rtop b, b.rbottom b{display:block;height: 1px;overflow: hidden; background: #9BD1FA}
b.r1{margin: 0 5px}
b.r2{margin: 0 3px}
b.r3{margin: 0 2px}
b.rtop b.r4, b.rbottom b.r4{margin: 0 1px;height: 2px}
</style>
</head><body>
<div class="RoundedCorner">
<b class="rtop"><b class="r1"></b><b class="r2"></b><b class="r3"></b><b class="r4">
</b></b><br>
無圖片實現圓角框<br>
<br>
<b class="rbottom"><b class="r4"></b><b class="r3"></b><b class="r2"></b><b class="r1">
</b></b>
</div>
</body></html><html><head>
<title>css圓角效果</title>
<meta http-equiv="content-type" content="text/html; charset=gb2312">
<style type="text/css">
div.RoundedCorner{background: #9BD1FA}
b.rtop, b.rbottom{display:block;background: #FFF}
b.rtop b, b.rbottom b{display:block;height: 1px;overflow: hidden; background: #9BD1FA}
b.r1{margin: 0 5px}
b.r2{margin: 0 3px}
b.r3{margin: 0 2px}
b.rtop b.r4, b.rbottom b.r4{margin: 0 1px;height: 2px}
</style>
</head><body>
<div class="RoundedCorner">
<b class="rtop"><b class="r1"></b><b class="r2"></b><b class="r3"></b><b class="r4">
</b></b><br>
無圖片實現圓角框<br>
<br>
<b class="rbottom"><b class="r4"></b><b class="r3"></b><b class="r2"></b><b class="r1">
</b></b>
</div>
</body></html>
如圖：
方法二
閱讀代碼編輯代碼運行效果複製HTML代碼保存代碼
<table style="table-layout: fixed" height="28" cellspacing="0" cellpadding="0" width="100%"
border="0">
<tbody>
<tr height="3" width="100%">
<td>
<table style="table-layout: fixed" height="3" cellspacing="0" cellpadding="0" width="100%"
border="0">
<tbody>
<tr height="1">
<td width="1"></td>
<td width="1"></td>
<td width="1"></td>
<td bgcolor="#908a47"></td>
<td width="1"></td>
<td width="1"></td>
<td width="1"></td>
</tr><tr height="1">
<td></td>
<td bgcolor="#908a47" colspan="2"></td>
<td bgcolor="#f7f8f9"></td>
<td bgcolor="#908a47" colspan="2"></td>
<td></td>
</tr><tr height="1">
<td></td>
<td bgcolor="#908a47"></td>
<td bgcolor="#f7f8f9" colspan="3"></td>
<td bgcolor="#908a47"></td>
<td></td>
</tr>
</tbody>
</table>
</td>
</tr><tr>
<td>
<table style="table-layout: fixed" height="100%" cellspacing="0" cellpadding="0"
border="0">
<tbody>
<tr>
<td width="1" bgcolor="#908a47"></td>
<td id="oINNER" bgcolor="#f7f8f9"> </td>
<td width="1" bgcolor="#908a47"></td>
</tr>
</tbody>
</table>
</td>
</tr><tr height="3" width="100%">
<td>
<table style="table-layout: fixed" height="3" cellspacing="0" cellpadding="0" width="100%"
border="0">
<tbody>
<tr height="1">
<td width="1"></td>
<td width="1" bgcolor="#908a47"></td>
<td width="1" bgcolor="#f7f8f9"></td>
<td bgcolor="#f7f8f9"></td>
<td width="1" bgcolor="#f7f8f9"></td>
<td width="1" bgcolor="#908a47"></td>
<td width="1"></td>
</tr><tr height="1">
<td></td>
<td bgcolor="#908a47" colspan="2"></td>
<td bgcolor="#f7f8f9"></td>
<td bgcolor="#908a47" colspan="2"></td>
<td></td>
</tr><tr height="1">
<td colspan="3"></td>
<td bgcolor="#908a47"></td>
<td colspan="3"></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table><table style="table-layout: fixed" height="28" cellspacing="0" cellpadding="0" width="100%"
border="0">
<tbody>
<tr height="3" width="100%">
<td>
<table style="table-layout: fixed" height="3" cellspacing="0" cellpadding="0" width="100%"
border="0">
<tbody>
<tr height="1">
<td width="1"></td>
<td width="1"></td>
<td width="1"></td>
<td bgcolor="#908a47"></td>
<td width="1"></td>
<td width="1"></td>
<td width="1"></td>
</tr><tr height="1">
<td></td>
<td bgcolor="#908a47" colspan="2"></td>
<td bgcolor="#f7f8f9"></td>
<td bgcolor="#908a47" colspan="2"></td>
<td></td>
</tr><tr height="1">
<td></td>
<td bgcolor="#908a47"></td>
<td bgcolor="#f7f8f9" colspan="3"></td>
<td bgcolor="#908a47"></td>
<td></td>
</tr>
</tbody>
</table>
</td>
</tr><tr>
<td>
<table style="table-layout: fixed" height="100%" cellspacing="0" cellpadding="0"
border="0">
<tbody>
<tr>
<td width="1" bgcolor="#908a47"></td>
<td id="oINNER" bgcolor="#f7f8f9"> </td>
<td width="1" bgcolor="#908a47"></td>
</tr>
</tbody>
</table>
</td>
</tr><tr height="3" width="100%">
<td>
<table style="table-layout: fixed" height="3" cellspacing="0" cellpadding="0" width="100%"
border="0">
<tbody>
<tr height="1">
<td width="1"></td>
<td width="1" bgcolor="#908a47"></td>
<td width="1" bgcolor="#f7f8f9"></td>
<td bgcolor="#f7f8f9"></td>
<td width="1" bgcolor="#f7f8f9"></td>
<td width="1" bgcolor="#908a47"></td>
<td width="1"></td>
</tr><tr height="1">
<td></td>
<td bgcolor="#908a47" colspan="2"></td>
<td bgcolor="#f7f8f9"></td>
<td bgcolor="#908a47" colspan="2"></td>
<td></td>
</tr><tr height="1">
<td colspan="3"></td>
<td bgcolor="#908a47"></td>
<td colspan="3"></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
如圖所顯示：
