UPDATED: MAY 06, 2015 – ARTICLE: CSS DASH BORDER
You may want to have a dashed border around a piece of text as this sample on your site. Using a CSS dashed border code its easy. The CSS dashed border code will tell the HTML code to place a dashed border around the text.
With this CSS Code you can create a dashed color border around text, increase the size of the dashes, adjust the padding so your text will not be to close to the dashed 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 above.
Copy the below CSS Dashed Border Code
If you are creating a website this code could come in handy. Below is the CSS Code that will make the dash border work, edit the code to what you want.
p.dashed { border: dashed 1px #3D85BE; 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 dash border around in a HTML code, the CSS code will tell the HTML code what to do. Below is the HTML code:
<p class="dashed">Place your text here</p>
Using the paragraph class “dashed” 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.dashed { border: dashed 1px #3D85BE; 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;Please Share
Build your own website and sell stuff. Add as many products as you want and it won't cost you any extra.
Get super fast hosting
Free domain registration
Outstanding reliability
Free shopping basket
Easy to use site builder
Try creating your website free for 30 days. No credit card required, click the below link.
Free domain included or add a domain you own - Install WordPress in a few clicks - Great support team.
Get a Website that Works. It's quick and easy. No experience necessary.
Sign up today and get 20 percent off your hosting.