CSS rounded corner block container generator

CSS rounded corner block container generator_CSS/HTML

WBOY

Release： 2016-05-16 12:12:30

Original

1618 people have browsed it

Of course you still use pictures, but you can generate pictures with the colors you want.

http://www.neuroticweb.com/recursos/css-rounded-box/

Store the image generated above and the following code in the same folder:

<p>

</p>
<title>CSS rounded block container</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<style>
.rbroundbox { background: url(nt.gif) repeat; }
.rbtop div { background: url(tl.gif) no-repeat top left; }
.rbtop { background: url(tr.gif) no-repeat top right; }
.rbbot div { background: url(bl.gif) no-repeat bottom left; }
.rbbot { background: url(br.gif) no-repeat bottom right; }<style>
.rbroundbox { background: url(nt.gif) repeat; }
.rbtop div { background: url(tl.gif) no-repeat top left; }
.rbtop { background: url(tr.gif) no-repeat top right; }
.rbbot div { background: url(bl.gif) no-repeat bottom left; }
.rbbot { background: url(br.gif) no-repeat bottom right; }
<P>/* height and width stuff, width not really nessisary. */
.rbtop div, .rbtop, .rbbot div, .rbbot {
width: 100%;
height: 7px;
font-size: 1px;
}
.rbcontent { margin: 0 7px; }
.rbroundbox { width: 50%; margin: 1em auto; }
</style>
/* height and width stuff, width not really nessisary. */
.rbtop div, .rbtop, .rbbot div, .rbbot {
width: 100%;
height: 7px;
font-size: 1px;
}
.rbcontent { margin: 0 7px; }
.rbroundbox { width: 50%; margin: 1em auto; }

<p>
</p>
<div class="rbroundbox">
<div class="rbtop">
 <div></div>
</div>
<div class="rbcontent">
  <p>
   </p>Lorem ipsum dolor sit amet,
   consectetuer adipiscing elit. Duis
   ornare ultricies libero. Donec
   fringilla, eros at dapibus fermentum,
   tellus tellus auctor erat, vitae porta
   magna libero sed libero. Mauris sed leo.
   Aliquam aliquam. Maecenas vestibulum.</div>
  <div class="rbbot">
 <div></div>
</div>
</div>