How to Make Website Borders

Making website borders is fairly easy if you have at least a basic understanding of HTML. Borders are a type of adornment that is added to a website to give it a little more flair. Borders have styles of their own, which include the border design, color and width. They can be placed around paragraphs, quotes, lists and pages. If you have Photoshop or a similar program, you can customize your borders.

Things You'll Need

• Text editor
• HTML editor (optional)
• Photoshop (optional)

Instructions

1. Define where the border will go.

   Use HTML in a text editor, like Notepad, to define the location of the border. To do this, you insert the definition within the appropriate HTML tag. For example, if you want your border to surround a list, you first define the list; within that tag, you define the border.

   <UL type="disc" STYLE="border

   For a border around a paragraph, define the border within the paragraph tag.

   <p STYLE="border

   If you only want one side of the paragraph to be bordered, define the side:

   <p STYLE="border-right

2. Characterize the border style.

   Once you define the border, you need to identify its characteristics. Borders can be solid, dashed, dotted, inset or of many other types. To make a solid website border around a paragraph, follow this example:

   <p STYLE="border-style: solid

3. Define the border color.

   You might want your border to be black, or you might want it to be blue. To define the color around a paragraph border, include the color in the paragraph's style tag.

   <p STYLE="border-style: solid; border-color: blue

   Note: To ensure that your border is the proper shade of blue, you might want to define it more precisely by using HTML color codes. Navy blue, for example, would be #33339F.

4. Define the border's thickness. If you don't indicate the size of the border lines, browsers will decide for themselves what you want. This could cause your page to look different in each browser. The definitions of border thickness can be simple words---thick, thin or medium--or they can be in more accurate sizes, such as 100px.

   <p STYLE="border-style: solid; border-color: blue; border-width: thin">This paragraph will have a solid, blue, thin line around it</p>

5. Customize your website borders.

   This is an optional step that can make your border much nicer. Use a graphic or imaging software like Photoshop to create a custom border and insert the image using the "border-image" tag.

Resources

• Basic HTML tutorial
• Creating a website