Being able to draw a line around a block of text and/or pictures is handy if you want to group a section of related items together. This has the visual effect of placing your text and pictures in a rectangular box. The box serves to separate the content from the rest of the page, and may be used either to emphasize its content, or to make it like an inset in your page. This tutorial shows you how you can accomplish this using CSS.
This article is targeted at those who hand code directly in HTML and CSS. As such, some basic CSS/HTML knowledge is assumed. You do not have to be an expert, but you will need some working knowledge of what CSS is as well as how you can insert CSS into your page.
If you have arrived at this page with the intention of learning more about how to create your own website, you should read my article on How to Start Your Own Website instead. It will take you through all the necessary steps of making your own site. Creating a website is more than just designing the visual appearance.
Let's say that you have some text or pictures that you want to enclose in a box.
Create the HTML for the block. For this tutorial, I shall use a DIV block to enclose the text/pictures.
I gave the DIV block a class of "boxed" but you can of course use some other valid CSS class name. Replace my dummy content with your actual text and/or images.
Next, you will need to style the DIV box by adding a border. In your CSS section, or external CSS file, add the following code:
The CSS code above specifies a 1 pixel border for the class "boxed". The box will have a solid green border. An example
of a box using this code can be seen above. I use the exact same code, "border: 1px solid green", to enclose
most of the code examples on thesitewizard.com (at the time I write this).
The thickness of the border can be changed if you find a 1 pixel border too thin for your liking. Similarly, other border styles besides "solid" are also possible. For example, "dotted" gives you a dotted border, "dashed" a border consisting of dashes, and "double" a double-lined border. Other values, which may or may not be implemented in your browser (depending on which browser you're using), include "inset", "outset", "ridge" and "groove". These give a 3D effect to your box.
The colour ("color" in US English)
of the border is specified with an RGB value (like #000 or #000000 for black), or, if it
is one of the 16 basic colours defined in the CSS specifications, by its colour name. If in doubt, use the colour
code. Most HTML editors and
programmer's editors have colour
pickers which you can use to select a colour by simply clicking on it. The editor then automatically generates the
appropriate RGB colour value for you, so using a numeric colour value should not be exceptionally difficult.
If you want to give your box rounded corners, please see the article How to Create Rounded Corners for Your Box Borders in CSS. You can also create coloured boxes in CSS, where the background of the box has a different colour from the rest of the page. Another visual effect that can be used is to make the box cast a shadow.
That's it. The procedure for creating a rectangular box around your text/images with CSS is, as you can see, very simple.
Copyright © 2008-2020 by Christopher Heng. All rights reserved.
Get more free tips and articles like this,
on web design, promotion, revenue and scripting, from https://www.thesitewizard.com/.
Do you find this article useful? You can learn of new articles and scripts that are published on thesitewizard.com by subscribing to the RSS feed. Simply point your RSS feed reader or a browser that supports RSS feeds at https://www.thesitewizard.com/thesitewizard.xml. You can read more about how to subscribe to RSS site feeds from my RSS FAQ.
This article is copyrighted. Please do not reproduce or distribute this article in whole or part, in any form.
It will appear on your page as:
How to Create a Rectangular Box to Contain Your Text/Pictures with CSS
