Without using border-radius, You can implement a reusable rounded rectangle with adaptive height and width, and a border-radius rounded corner.
Currently, css3 supports rounded rectangle, but it is difficult to solve compatibility issues, but it is necessary to understand the following methods.
In a div, it contains eight divs and controls the height, margin, and border attribute values of the eight divs to achieve the rounded rectangle effect. However, pay attention to the sequence of Divs.
Html code:
<Body> <div class = "bor"> <div class = "b1"> </div> <div class = "b2"> </div> <div class =" b3 "> </div> <div class =" b4 "> </div> <div class =" mid "> <p> do not use border-radius achieve a reusable rounded rectangle with adaptive height and width </p> </div> <div class = "bor"> <div class = "b4"> </div> <div class = "b3"> </div> <div class = "b2"> </div> <div class = "b1"> </div> </div> </body>
Css code:
.bor div { height: 1px; } .b1 { margin: 0 3px; background-color: black; } .b2, .b3, .b4, .mid { border-left: 1px solid black; border-right: 1px solid black; } .b2 { margin: 0 2px; } .b3 { margin: 0 1px; } .b4 { margin: 0 1px; }.mid p { margin: 0; padding:0 10px; font-size: 12px; line-height: 24px; white-space: pre-wrap;}