Make a Fixed-width Variable-height Round Cornered Box
By Stephen Bucaro
You have undoubtedly seen websites that display text within round cornered boxes,
and, since there is no round cornered html element, you wondered how that was
accomplished. In this article, you'll learn precisely how to create such a round
cornered box.
This is My Heading
This is my text. This is my text. This is my text. This is my text. This is my text.
This is my text. This is my text. This is my text. This is my text. This is my text.
In this article, we'll create fixed-width round cornered box because in
most cases webpages are designed with fixed-width columns, however, the box will
vary in height depending upon the amount of text and / or images it contains. A
round cornered box is actually an html div element with a background
image that is chopped into three pieces; a top, a middle slice which gets tiled
vertically, and a bottom.
shown below is the html code for the div. Note that within the div is a
<h2> (headline) element and several <p> (paragraph) elements,
the last <p> element uses a class named last.
<div class="box">
<h2>This is My Heading</h2>
<p>This is my text. This is my text. This is my text.
This is my text. This is my text. This is my text.
This is my text. This is my text. This is my text.
This is my text. This is my text. This is my text.
This is my text. This is my text. This is my text.</p>
<p class="last">This is my text. This is my text.
This is my text. This is my text. This is my text.
This is my text. This is my text. This is my text.
This is my text. This is my text. This is my text.
This is my text. This is my text. This is my text.</p>
</div>
The <h2> element displays the top rounded corner box image
in its background. The <div> displays the middle slice image
which gets tiled vertically. The last <p> element displays the bottom
rounded corner box image in its background. Obviously you can use only one
<h2> element at the top of the div and the one bottom <p> element
that uses a class named last.
| 
About BTH
User Agreement
Privacy
Site Map
Contact
News Feeds
RSS Feed
Follow @Stephen Bucaro
General Web Design
