UPDATED: MAY 06, 2015 – ARTICLE: BORDERS AND BACKGROUNDS CODE

Borders and backgrounds – Here are some borders and backgrounds codes that you can use when you are learning how to make a website. Copy the code, replace with your stuff, quick and easy. Select the border and background you would like to use, copy the border and background code to your site, then change the text content to your content and edit the background and border code to your style.

Borders and Backgrounds 1

 
Borders and Backgrounds Code

<div style="width:400px; border: solid 1px #6F6F6F; background: #FFFFFF; padding: 2px; margin: 0; text-align: justify; line-height: 18px; color: #333333; font-size: 15px">
With this border and background code you can control the width, the padding, add text into the box, change the border width, border colour, 
background colour, text colour, text size and the text will be justified which means the text will go all the way to the right.</div>

Borders and Backgrounds 2

 
Borders and Backgrounds Code

<div style="width:160px; border: solid 1px #000000; background: #D4D4D4; padding: 2px; margin: 0; line-height: 18px; color: #333333; font-size: 15px">
With this border and background code you can control the width, the padding, add text into the box, change the border width, border colour, background colour, text colour, text size, the text is not justified on this code.</div>

Borders and Backgrounds 3

 
Borders and Backgrounds Code

<div style="width:400px; border-radius: 10px; border: solid 1px #71C5DF; background: #F9F9FF; padding: 5px; margin: 0; text-align: justify; line-height: 18px; color: #367DB6; font-size: 15px">
With this border and background code you can control the width, the border radius, the padding, add text into the box, change the border width, border colour, background colour, text colour, text size and the text will be justified which means the text will go all the way to the right. This code works in Google Chrome and Firefox you will see the curve, Internet Explorer some versions there is no curve.</div>

Borders and Backgrounds 4

 
Borders and Backgrounds Code

<div style="width:400px; border-radius: 10px; border: solid 1px #888; -moz-box-shadow: 0 0 3px 3px #888; -webkit-box-shadow: 0 0 3px 3px#888; box-shadow: 0 0 3px 3px #888; background: #FFFFFF; padding: 5px; margin: 0; text-align: justify; line-height: 18px; color: #333333; font-size: 15px">
With this border and background code you can control the width, the border radius, the padding, the shadow effect, add text into the box, change the border width, border colour, background colour, text colour, text shadow colour, text size and the text will be justified which means the text will go all the way to the right. This code works in Google Chrome and Firefox you will see the curve, Internet Explorer some versions there is no curve and shadow.</div>

Borders and Backgrounds 5

 
Borders and Backgrounds Code

<div style="width:400px; border-radius: 10px; border: solid 1px #888; -moz-box-shadow: 3px 3px 3px black; -webkit-box-shadow: 3px 3px 3px black; box-shadow: 3px 3px 3px black; background: #FFFFFF; padding: 5px; margin: 0; text-align: justify; line-height: 18px; color: #333333; font-size: 15px">
With this border and background code you can control the width, the border radius, the padding, the shadow effect, add text into the box, change the border width, border colour, background colour, text colour, text shadow colour, text size and the text will be justified which means the text will go all the way to the right. This code works in Google Chrome and Firefox you will see the curve, Internet Explorer some versions there is no curve and shadow.</div>

All the above borders and backgrounds work in WordPress, just paste the code in to the editor and replace our text with your stuff then edit the code to your colours and size.

More sites on Borders and Backgrounds

Quackit – http://www.quackit.com/html/codes/html_borders.cfm
W3Schools – http://www.w3schools.com/css/css_border.asp