<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN "" http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <Html xmlns =" http://www.w3.org/1999/xhtml "> <Head> <meta http-equiv =" Content-Type "content =" text/html; charset = UTF-8 "/> <title> corner box without image implementation </title> <style type =" text/css "> body {padding: 50px ;}. container {margin: 0px auto; width: 600px; border: 0px solid # F00; padding: 10px;}/* corner frame using background color */div. roundedCorner {background: # ccc}/* the background color of the content area must be the same as the background color of the upper and lower corner border */B. rtop, B. rbottom {display: block; background: # fff}/* the background color at the rounded corner is the same as the main background, so that the rounded corner effect */B can appear. rtop B, B. rbottom B {display: block; height: 1px; overflow: hidden; background: # ccc}/* properly control the margin of the upper and lower borders to form step changes. */B appears. 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 }. content {width: 200px; height: 500px; padding: 10px ;} </style>