Home >Web Front-end >CSS Tutorial >CSS rounded corner block container generator_CSS/HTML

CSS rounded corner block container generator_CSS/HTML

WBOYOriginal: 2016-05-16 12:12:301708browse

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>

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：DIV_implementation of rounded edges and corners_CSS/HTMLNext article：DIV_implementation of rounded edges and corners_CSS/HTML

See more

CSS rounded corner block container generator_CSS/HTML

Related articles