Welcome to Bucaro TecHelp!

Bucaro TecHelp
Maintain Your Computer and Use it More Effectively
to Design a Web Site and Make Money on the Web

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

Victims of Sandy Hook

Stop the Slaughter of Innocents. Congress is bought and paid for by gun lunatics and gun promotion groups. If you want to live in a safe America, help buy Congress back for America. Send a donation to Mayors Against Illegal Guns, 909 Third Avenue, 15th Floor New York, NY 10022

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


Web Design Sections

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