CSS Create rounded corner box

We will then create an XHTML page that contains two content areas of two div with ID fixedbox and Flowbox, two div with fixed width and fixed width, and now we'll add rounded corners to the two div.

The theory we use is that when you add a background to an element, the background picture always appears above the back color; To create a monochrome rounded rectangle, we can create a normal rectangular box, and then use a rounded picture that is consistent with the background color as the four rounded corners of this element to form a rounded corner. The following are two cases-a fixed-size box and a flow-type box with an unfixed size to specify the method.

Add rounded corners to a fixed size box

First step: Create a basic XHTML document and add a little content to it

view plaincopy to clipboardprint?
<div id="fixedBox">
<p>This is just a test page of enpor.com.</p>
</div>
<div id="fixedBox">
<p>This is just a test page of enpor.com.</p>
</div>

We now create an XHTML document with a div with ID fixedbox, and we'll create a rounded border with this div. Then add the basic styling for this document:

view plaincopy to clipboardprint?
body, html {
margin:0;
padding:0;
background:#a7a09a;
color:#000;
}
body, html {
margin:0;
padding:0;
background:#a7a09a;
color:#000;
}

Step Two: Set the width and background color of Div

view plaincopy to clipboardprint?
div#fixedBox {
width:340px;
margin:40px;
background:#E4ECF9;
}
div#fixedBox {
width:340px;
margin:40px;
background:#E4ECF9;
}