UPDATED: MAY 06, 2015 – ARTICLE: CSS SOLID BORDER

To make a solid border around a piece of text using CSS then follow our tutorials. Using a CSS solid border code. The CSS solid border code will tell the HTML code to place a solid border around the text just like this border.

With the CSS Code you can create a solid border any color you want around text, increase the width of the border, adjust the padding so your text will not be to close to the solid border, change the background color in the border, change the text color, and lastly change the text size.

If you change the text size you will have to also change the line height to stop the text going over each other you can also do that. The text is also set to justify this means that the text will align itself on the right as the sample.

Copy the below CSS Solid Border Code

Below is the CSS Code that will make the solid border work.

 p.solid {
 border: solid 2px #333399;
 padding: 10px;   
 background: #FFFFFF;        
 color: #000000;
 line-height: 24px;
 font-size:20px;
 text-align: justify;
 }  

The HTML Code

You will have to place any text you want a solid border around in a HTML code, the CSS code will tell the HTML code what to do. Below is the HTML code:

<p class="solid">Place your text here</p>

Using the paragraph class “solid” only text you place in it will follow the CSS rule. This means that no other text on your page will be effected.

Editing the CSS

 p.solid {
 border: solid 2px #333399;     Change the border width and colour
 padding: 10px;                 Adjust the padding
 background: #FFFFFF;           Change the background colour
 color: #000000;                Change the text colour
 line-height: 24px;             Line height
 font-size:20px;                Font size
 text-align: justify;           Text aligns to the right
 } 

The above code is designed to have your text align to the right. If you do not want your text to align to the right then remove:

text-align: justify; 

Don’t forget if you are looking at building your own website then follow our beginner tutorials on the best way to create a website and you will soon be online.