Go to TopCurved Corners

Page design is largely a matter of laying out a collection of rectangualr blocks. These will contain text, graphics, or some other object. The forthcoming version of CSS (CSS3) is planned to introduce a facility to add curved corners to a containing block. However, currently this is not implemented in a sufficient range of popular browsers to make it an approach worth using. (KompoZer itself hasn't the required options available in the CSS Stylesheet dialogue and won't display such curves.) Although techniques using CSS2 alone are possible, they are over complex for beginners, so for the time being, adding curved graphics remains the simplest approach when seeking to smooth the corners of any block in your page design.

Illustrated below is a panel with curved corners that has been added to the Third Column of the adapted Master Page demonstration created on this site.

A Panel with Curved Corners added to the Master Page

The techniques used in this panel can be used in a variety of settings. For example, they could as easily be applied to create a "frame" for an entire page. However, there are also limitations. For example, text cannot overlay the images, necessarily keeping the radius of the curves tight and making longer sweeping curves impossible to achieve. See the Variations section below for some notes on additional techniques.

Go to TopCreating a Panel

Introduction

In the example above, the panel is composed of a heading and three list items. Its design was inspired by someone who had used a table to produce his panel, hence the list has been styled to reproduce a standard table-like effect. Your own panel could have any content. All that is done is that the top corner images are floated left and right in the first block of the panel, in this case a heading block, and at the bottom a footer panel is added. Here a paragraph block, which is empty except for the two floated bottom corner graphics. All blocks are then given a background colour ro match the corner graphics.

The starting point for this exercise is a saved page with an external stylesheet.  This can either be a newly created blank page with a grey background (background-color: #cccccc;) or the adapted master page. (A demo can be downloaded from a link at the bottom of the Third Column tutorial.)

The graphics, used in this tutorial, to create the curved corners are shown below. Notice that these have grey outer edges to match the background colour used in the third column tutorial of the adapted master page. Similar images can be created in almost any image editing software.

Top Left Corner Graphic Top Right Corner Graphic
Bottom Left Corner Graphic Bottom Right Corner Graphic

TIP: To use these images to complete this tutorial, right-click on each of these graphics in turn and choose "Save image as..." or "Save picture as..." to save them to an appropriate location. (By convention this would be an "images" sub-folder of the folder where the page containing the panel is to be created.

If using the demo Third Column page then, before you start, make the following changes:

  • Change the width of the "main" block's right margin and the "col3" width to 160px in order to accommodate a 150px wide panel with some margin space.
  • Pad the content block with enough content to ensure that the page is deep enough to accommodate the panel in the third column.
  • Select and delete the dummy text "col3", leaving the cursor flashing in its place.

Go to TopCreate the Panel's Style

1. Click the CSS toolbar button to open the CSS Stylesheets dialogue.

2. On the dialogue, click the Style Rule (Artist's Palette) button. In the text field on the right enter "div.panel" (without the quotes) and then click the "Create Style rule" button.

3. On the right hand pane, under the "Text", "Box" and "Background" tabs and enter these settings in the way that you learnt in the External Stylesheet exercise (or paste the following code into the "General" tab. The order of the rules doesn't matter.):

margin: 5px auto;
width: 150px;
background-color: #003366;
text-align: center;

EXPLANATION: The panel is to be contained in a generic container with the class name "panel". The contents of this will have a top and bottom margin of 5px. The left and right margins will automatically equalise so that the panel is centred in its containing block. The width of the panel will be 150px, its background colour will be a dark blue and all text within it will be centred.

Go to TopCreate the Heading Style 

1. Click the Style Rule (Artist's Palette) button. In the text field on the right enter "div.panel h1" (without the quotes) and then click the "Create Style rule" button.

3. On the right hand pane, under the "Text" and "Box" tabs and enter these settings in the way that you learnt in the External Stylesheet exercise (or paste the following code into the "General" tab. The order of the rules doesn't matter.):

margin-top: 0px;
margin-bottom: 5px;
color: white;

EXPLANATION: This heading rule will only be applied when the heading is within a generic container block with the class name "panel". There is no margin above the heading and a 5px margin below. Any text will be white.

Go to TopCreate the List Style

1. Click the Style Rule (Artist's Palette) button. In the text field on the right enter "div.panel ul" (without the quotes) and then click the "Create Style rule" button.

3. On the right hand pane, under the "Text" and "Box" tabs and enter these settings in the way that you learnt in the External Stylesheet exercise (or paste the following code into the "General" tab. The order of the rules doesn't matter.):

margin: 0px auto 7px;
padding: 0px;
background-color: white;
width: 120px;
list-style-type: none;

EXPLANATION: This List rule will only be applied when the list is within a generic container block with the class name "panel". There is no margin above the heading (Following the collapsing vertical margin rule for CSS, the larger 5px margin of the block above will be applied). A 15px margn is planned for each side and below the list. This is achieved be defining the width of the list 30px narrower than the panel itself (120px) and then setting the left and right margins to automatically equalise. The bottom margin is set at 7px. This is to allow for the 8px corner graphics to be set in the "footer" paragraph below. The background colour is set to white over-riding the panels default colour. The list style type is set to none to over-ride the default bullet and padding is set to 0px to over-ride default padding associated with bullets.

Go to TopCreate the List Item Style

1. Click the Style Rule (Artist's Palette) button. In the text field on the right enter "div.panel li" (without the quotes) and then click the "Create Style rule" button.

3. On the right hand pane, under the "Border" tab and enter this settings in the way that you learnt in the External Stylesheet exercise (or paste the following code into the "General" tab:

border: 2px ridge silver;

EXPLANATION: This list item rule will only be applied when the list item is within a generic container block with the class name "panel". A ridged 2px border in silver roughly duplicates the default for a table cell in most browsers.

1. Click the Style Rule (Artist's Palette) button. In the text field on the right enter "div.panel p" (without the quotes) and then click the "Create Style rule" button.

3. On the right hand pane, under the "Box" tabs and enter these settings in the way that you learnt in the External Stylesheet exercise (or paste the following code into the "General" tab. The order of the rules doesn't matter.):

margin: 0px;
height: 8px;

EXPLANATION: This paragraph rule will only be applied when the paragraph is within a generic container block with the class name "panel". As the block will contain no text a height needs to be set to give it the depth required to show its background colour between the two corner graphics that it will contain. The dimension 8px matches the height the graphics to be used. A top margin of 0px ensures the block will butt up to the list above. That has a margin of 7px which, taken with the current paragraph, provides the full 15px spacing wanted around the list conents. All other margins are set to 0px, also ensuring that the margin around the paragraph are subordinate to the containing container.

Go to TopCreate the Panel Container

1. On the Formatting Toolbar, drop down the Paragraph formatting list and select "Paragraph" then  right-click on the <p> tag and select "Change tag". The "p" becomes selected. Type "div" (without the quotes and hit the carriage return key.

NOTE: On a blank page it is not necessary to create a pargraph block first and then convert it manually. However, KompoZer can appear fussy about creating a nested generic container inside an apparently empty generic container, as it takes into account spaces, <br> tags and other "invisible" code that may be present. Accordingly, it may refuse sometimes indicating "mixed" content. This is the reason for using this tag change technique here.

2. On the status line, right-click over the <div> tag on the satus line and select "classes" then "panel" from the menu. (The cursor centres in a blue block.)

Go to TopEnter and Style the Text

1. With the cursor in the center of the blue block, enter the following text on separate lines:

NOTE: If you do this by pasting the text below into the panel it is automatically assigned the "Preformat" tag. Change this to "Body Text" by selecting all the text (The CTRL-A keystroke will do this!) and then using the Paragraph Style drop-down list.

Heading
Item1
Item2
Item3

2. Place the cursor within the first line, drop down the paragraph format list and change "Body Text" to read "Heading 1". (The text enlarges and turns white)

3. Select all the remaining three lines then click the "Bulleted List" toolbar button. (This list turns white, and adds a "button-like" effect.)

4. Click on the <ul> button on the status line and then hit the Cursor-Right key. (This moves the cursor outside the list block.)

5. Hit the CR/Enter key to add a new line and extend the panel, then select "Paragraph" from the paragraph format drop-down list. (The bottom margin of the panel reduces in size to match the left and right margins.)

Go to TopAdd the Corner Images

1. With the cursor still within the bottom paragraph, click on the "Image" toolbar button. On the "Image Property" dialogue, under the "Location" tab, use the "Choose file..." button to locate the bottom left corner image and select it. Also select the "Don't use alternate text" option. Do NOT click the "OK" button.

2. Select the "Appearance" tab. Under the "Align Text to Image", select the "Wrap to the right" option from the drop-down list. Now click the "OK" button. (The left bottom corner image should now be in place.)

3. With the cursor still in the bottom paragraph, repeat steps one and two, but this time choosing the bottom right image and "Wrap to the left", where appropriate. (The right bottom corner image should now be in place.)

4. Click in the heading text, then in the <h1> tag on the status line, then hit the cursor-left key. (This moves the cursor in front of the heading but within the <div class="panel"> block.)

5. Repeat steps one and two, but this time choosing the top left image and "Wrap to the right", where appropriate. (The top left corner image should now be in place.)

6. Repeat steps one and two, but this time choosing the top right image and "Wrap to the left", where appropriate. (The top right corner image should now be in place.)

Go to TopVariations

The approach used above was intended to be both flexible and simple. Using four separate corner graphics means the approach allows for further similar panels to appear but with different dimensions. Were all panels to be the same width, it might be simpler to use just two graphics, for the top and bottom and that matched the fixed width. It was also intended to be simple. If you had already worked through the Master Page and Third Column tutorials, then it introduced no new techniques other than the use of graphics that needed to be prepared in advance.

However, there are problems with the approach. For example, coding purists would object because an empty paragraph block was used purely for the purpose of holding the decorative graphics at the base of the panel. A principle of modern HTML coding is that the markup is used solely for semantic purposes and that styling and decorative code is kept within the CSS.

It would be better practice to have included the corner graphics to the background of various elements that comprise the panel. Placing the graphics in the background also allow text to overlay the graphics. This opens up, for example, the possibility of textures being used for the panel brackground.

Below is the CSS used in this Preferred Example. Notice how it takes advantage of the the Definition List construction which provides three "hooks" onto which you can hang three of the four curved corners. First we simply provide a grey background to the panel:

body {
background-color: #cccccc;
}

In the panel container defines the background colour then the background image is placed in one of the bottom corners. The margin settings ensure the panel is centred within its containing block. All text in the panel will be centred and finally a percentage width is set that allows you to see how it reflows with differing window widths.

div.panel {
background-color: #003366;
background-image: url(images/botleft.png);
background-repeat: no-repeat;
background-position: left bottom;
margin-right: auto;
margin-left: auto;
text-align: center;
width: 50%;
}

The start of the Definition List allows us to place one of the top corner graphics. The margin setting is required because otherwise Internet Explorer (and perhaps other browsers) will use a different margin setting, which corrupts the bottom of the panel.

div.panel dl {
background-repeat: no-repeat;
background-image: url(images/topleft.png);
background-position: left top;
margin: 0;
}

The Definition Term will also appear at the very top of the panel, so it provides the opportunity for the second upper corner to be defined. It is also where the size and colour of the "Heading" text is defined, simulating the default appearance of an <h1> tag.

div.panel dt {
background-repeat: no-repeat;
background-image: url(images/topright.png);
background-position: right top;
font-size: 2em;
color: white;
}

The Definition Data block needs to include a margin definition or the browser defaults, which insets the text, will take over. The padding settings provide the space on the two sides and the bottom, which allow the dark blue "border" to show round the body text in the panel. Finally, it provides the hook for the fourth other bottom corner graphic.

NOTE: It now becomes clear why the <dl> tag had to be used to place a bottom corner and not one of the top corners. Only one graphic can be associated with each tag and the <dl> and <dd> tags are the only ones that form the bottom edge of the panel.

div.panel dd {
margin: 0em;
padding: 0em 1em 1em;
background-image: url(images/botright.png);
background-repeat: no-repeat;
background-position: right bottom;
}

The final additional <div> is an "extra" and only required if one is going to provide a different background colour to the panel for its main body. Here the text is set to dark blue on a white background with a small amount of padding.

If the entire panel was to be dark blue with white text, then this tag would not have been required in the HTML. The definition for the colour and background colour could have been set in the <dl> section. If only a change in colour for either the heading or body of the panel then it could have been set in the <dt> or <dd> tag as required, over-riding the setting fixed for the <dl> tag.

div.panel div {
padding: 0.2em;
background-color: white;
color: #003366;
}

Go to Top Page updated: 7 April 2009