How to Write a rounded border without using border-radius?

HTML code:
<Div class = "items">
<-- Rounded border above -->
<B class = "xtop"> <B class = "xb1"> </B> <B class = "XB2"> </B> <B class = "xb3"> </B> <B class = "xb4"> </B>
<Ul class = "xboxcon">
<Div class = "item_title"> System Administrator option </div>
<Li> <a href = "main_dorm.aspx"> dormitory management </a> </LI>
<Li> <a href = "main_system.aspx"> System Configuration </a> </LI>
<Li> <a href = "main_quanxian.aspx"> permission settings </a> </LI>
<Li> <a href = "addnews. aspx"> Publish news </a> <a href = "newslist. aspx"> [LIST] </a> </LI>
<Li> <a href = "m_log.aspx"> system logs </a> </LI>
</Ul>

<-- Bottom rounded border -->

<B class = "xbottom"> <B class = "xb4"> </B> <B class = "xb3"> </B> <B class = "XB2"> </B> <B class = "xb1"> </B>

<Div class = "clear"> </div>
</Div>

CSS style

. Xtop,. xbottom {display: block; Background: transparent; font-size: 1px ;}
. Xb1,. XB2,. xb3,. xb4 {display: block; overflow: hidden ;}
. Xb1,. XB2,. xb3 {Height: 1px ;}
. XB2,. xb3,. xb4 {border-left: 1px solid #77cce7; border-Right: 1px solid #77cce7 ;}
. Xb1 {margin: 0 5px; Background: #77cce7 ;}
. XB2 {margin: 0 3px; border-width: 0 2px ;}
. Xb3 {margin: 0 2px ;}
. Xb4 {Height: 2px; margin: 0 1px ;}
. Xboxcon {margin: 0px; display: block; Border: 0 solid #77cce7; border-width: 0 1px ;}

Explanation:

First, the implementation of his rounded corner is not a real rounded corner, but is accumulated by four B labels. Each B label is 1px in height, and the last one is 2px.

All B tags are block-level element blocks;

<B class = "xtop"> <! -- The outermost B label is wrapped with four sub-B labels. -->
<B class = "xb1"> </B> <! -- This is the top horizontal line and the background color is #77cce7. The left and right sides all have 5 PX margin, which is equivalent to 5 PX blank -->
<B class = "XB2"> </B> <! -- This is the second layer, the background is white, the left and right border color # 2px of 77cce7, and the left and right margin is 3px blank. -->
<B class = "xb3"> </B> <! -- Layer 3: the background is white; the left and right sides of the border are colored # 1px of 77cce7; the left and right margins are 2px -->
<B class = "xb4"> </B> <! -- Layer 4: the background is white; the left and right sides of the border # 1px of 77cce7; the outer margin is 1px -->
</B>

The left and right radians below are the opposite overlays above.
In fact, it is the result of layer-by-layer accumulation. Each B shows only a few pixel points and is visually a radian.

It is to use four lines, the first shortest physical line, the second line to the fourth line is a line with a height of 1 and a border of 1 on both sides. The length of these three lines increases sequentially. The last step is to form the rounded corner above, and the rounded corner below uses the stacked lines.