Welcome to Bucaro TecHelp!

Bucaro TecHelp
HTTPS Encryption not required because no account numbers or
personal information is ever requested or accepted by this site

About Bucaro TecHelp About BTH User Agreement User Agreement Privacy Policy Privacy Site Map Site Map Contact Bucaro TecHelp Contact RSS News Feeds News Feeds

Make a Fixed-width Variable-height Round Cornered Box

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.

RSS Feed RSS Feed

Follow Stephen Bucaro Follow @Stephen Bucaro


Fire HD
[Site User Agreement] [Privacy Policy] [Site map] [Search This Site] [Contact Form]
Copyright©2001-2024 Bucaro TecHelp 13771 N Fountain Hills Blvd Suite 114-248 Fountain Hills, AZ 85268