How to put borders around text? A bit of coding for you.

<table border=1><tr><td> text here </td></tr></table>



<div style="border:1 solid #000000;background-color:#999999;margin:10px;padding:10px;">
text here
</div>




<center>
<table width="50%" border="5" bordercolorlight="#cc6633" bordercolordark="#cc0000"
cellspacing="9" cellpadding="3">
<tr align="middle">
<td>
<font size="5" color="#990000">
text here
</font>
</td>
</tr>
</table>
</center>




Large Red Dashed Border Code
<table width="357" height="267" align="center" style='border: 8px dashed red;'>
<tr>
<td align="center" valign="top"><div align="center">
text here
</div></td>
</tr>
</table>
<div align="center">


<div style="width:400px;text-align:left;padding:5px;background-color:#ffffc1;border:2px dotted black;font-size:12px;">text here</div>
<p>&nbsp;</p>
<p><br />


<div style="border:1px solid gold;padding:10px;">
<p>text here</p>
</div>

6 different options by the way.

 

Good information, I am sure the web-n00bs will appreciate this thread.

 

Hey that's awesome! Thanks for sharing the information.

 

Lol... The elements you use are block elements, so it will put a break before and after the element, you cannot use it if you only want some of the text in a sentence to have a border around it.

Like:
"Lorem ipsum dolor sit amet".
With your methods, you can't e.g. have a border around "dolor sit", because it will be parsed as:
"Lorem ipsum
dolor sit
amet"

Because of the breaks (divs and tables are block elements. It can not be but on the side of other content. Only with float:left/right, but you wouldn't do that).

The ONLY way to do this a proper way, is to use an inline element. The different between inline elements and block elements, is that inline's won't break the page.
You can of course use display:inline, but the EASIEST way, is to put the bordered text inside a <span> element.

Like:

<style type="text/css">
.border {
/* Your border style. e.g. */
border: 1px dotted red;
padding: 3;
}
</style>
Lorem ipsum <span class="border">dolor sit</span> amet.

HTML:

My code will create an output like:


Li Weng's code will output:

 

Hey good information. Thanks!

 

Nice clarification, let me add

Inline element for placing a border around a single line of text...

block level element <div> for bordering a block of text/etc such as the large red dashed table or box used above (just avoid the table though)