No image. CSS-only design of Table rounded corners

In the daily surfing of the internet, we often see some rounded border, which usually needs to be implemented using images, so can we use pure CSS to design the rounded corner of the table border? Actually, it is okay. Let's take a look at the examples of CSS rounded corners:

<Title> Design the Table rounded corner effect without image pure CSS -bkjia.com </title> <style type = "text/css"> div. liehuo_net_RoundedCorner... {background: # FFD1FA} B. rtop, B. rbottom... {display: block; background: # FFF} B. rtop B, B. rbottom B... {display: block; height: 1px; overflow: hidden; background: # ffD1FA} 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> <div class = "Liehuo_net_RoundedCorner"> <B class = "rtop"> <B class = "r1"> </B> <B class = "r2 "> </B> <B class =" r3 "> </B> <B class =" r4 "> </B> <table style =" width: 500px; height: 100px; "> <tr> <td> cell 1 </td> <td> Cell 2 </td> </tr> <td> cell 3 </td> <td> cell 4 </td> </tr> </table> <B class = "rbottom"> <B class = "r4"> </B> <B class = "r3"> </B> <B class = "r2"> </B> <B class = "r1"> </B> </div> <br/> <center> If the effect cannot be displayed, press Ctrl + F5 to refresh the page. For more webpage code: <a href =' http://www.bkjia.com/ 'Target = '_ blank'> http://www.bkjia.com/ </A> </center>

Tip: the code can be modified before running!