How to Create a Rectangular Box to Contain Your Text/Pictures with CSS

Draw a box around your content


How to Create a Rectangular Box to Contain Your Text/Pictures with CSS

by Christopher Heng, thesitewizard.com

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.

Prerequisites

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.

Using CSS to Draw a Border Around Your Block of Text and Pictures

Let's say that you have some text or pictures that you want to enclose in a box.

  1. Create the HTML for the block. For this tutorial, I shall use a DIV block to enclose the text/pictures.

    <div class="boxed">
      This text is enclosed in a box.
    </div>

    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.

  2. 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:

    .boxed {
      border: 1px solid green ;
    }

    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/.

thesitewizard™ News Feed (RSS Site Feed)  Subscribe to thesitewizard.com newsfeed

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.

Please Do Not Reprint This Article

This article is copyrighted. Please do not reproduce or distribute this article in whole or part, in any form.

Related Pages

New Articles

How to Link to This Page

It will appear on your page as:

How to Create a Rectangular Box to Contain Your Text/Pictures with CSS





Home
Donate
Contact
Link to Us
No Spam Policy
Privacy Policy
Topics
Site Map

Getting Started
Web Design
Search Engines
Revenue Making
Domains
Web Hosting
Blogging
JavaScripts
PHP
Perl / CGI
HTML
CSS
.htaccess / Apache
Newsletters
General
Seasonal
Reviews
FAQs
Wizards

 

 
Free webmasters and programmers resources, scripts and tutorials
 
HowtoHaven.com: Free How-To Guides
 
Site Design Tips at thesitewizard.com
Find this site useful?
Please link to us.