10GB Webmaster Package

Unique, quality digital content ready to be resold.

Includes:

Over 29,000 Ebooks
Over 7,000 Website templates
Over 11,000 Fonts
Over 39,000 Logos
Over 1,000 Cell Phone Games
Over 3,000 Cell Phone Images
Over 21,000 Ring Tones
...and much more!

Get your 10GB webmaster package now!

Comment Box Borders

Related:
• Comment Box Code
• Comment Box Colors
• Comment Box Pictures
• MySpace Comment Box Code
• MySpace Comment Box Generator
• Add Comments to Website

This page contains examples of comment boxes with borders. Feel free to copy and paste the code for your own use.

MySpace Users: If you need a comment box for your MySpace profile, use the MySpace comment box code.

Thin Border

In this example, the border is 1 pixel wide, solid, and a dark green color (hex color value: #6DB72C). Borders are created using the CSS border property.

Copy the following code:

<form action="/html/tags/html_form_tag_action.cfm" method="post">
<textarea name="comments" id="comments" style="width:200px;height:100px;font-family:cursive;border:solid 1px #6DB72C;">
Enter your comments here...

...and watch your comment box grow scrollbars!
</textarea><br>
<input type="submit" value="Submit">
</form>
<p style="font-family:verdana,arial,sans-serif;font-size:10px;"><a href="http://www.quackit.com/myspace/codes/">MySpace Codes</a></p>

Result:

Setting borders and colors in HTML is easy - if you know how.

Thick Border

In this example, I've made the border thicker (10 pixels wide).

Copy the following code:

<form action="/html/tags/html_form_tag_action.cfm" method="post">
<textarea name="comments" id="comments" style="width:200px;height:100px;font-family:cursive;border:solid 12px #6DB72C;">
Enter your comments here...

...and watch your comment box grow scrollbars!
</textarea><br>
<input type="submit" value="Submit">
</form>
<p style="font-family:verdana,arial,sans-serif;font-size:10px;"><a href="http://www.quackit.com/myspace/codes/">MySpace Codes</a></p>

Result:

Dotted Border

In this example, I've created a dotted border around the comment box. To do this, you simply change the value "solid" to "dotted".

Copy the following code:

<form action="/html/tags/html_form_tag_action.cfm" method="post">
<textarea name="comments" id="comments" style="width:200px;height:100px;font-family:cursive;border:dotted 12px #6DB72C;">
Enter your comments here...

...and watch your comment box grow scrollbars!
</textarea><br>
<input type="submit" value="Submit">
</form>
<p style="font-family:verdana,arial,sans-serif;font-size:10px;"><a href="http://www.quackit.com/myspace/codes/">MySpace Codes</a></p>

Result:

Dashed Border

In this example, I've changed the border to "dashed".

Copy the following code:

<form action="/html/tags/html_form_tag_action.cfm" method="post">
<textarea name="comments" id="comments" style="width:200px;height:100px;font-family:cursive;border:dashed 12px #6DB72C;">
Enter your comments here...

...and watch your comment box grow scrollbars!
</textarea><br>
<input type="submit" value="Submit">
</form>
<p style="font-family:verdana,arial,sans-serif;font-size:10px;"><a href="http://www.quackit.com/myspace/codes/">MySpace Codes</a></p>

Result:

Grooved Border

You can also give your border a "grooved" effect.

Copy the following code:

<form action="/html/tags/html_form_tag_action.cfm" method="post">
<textarea name="comments" id="comments" style="width:200px;height:100px;font-family:cursive;border:groove 12px #6DB72C;">
Enter your comments here...

...and watch your comment box grow scrollbars!
</textarea><br>
<input type="submit" value="Submit">
</form>
<p style="font-family:verdana,arial,sans-serif;font-size:10px;"><a href="http://www.quackit.com/myspace/codes/">MySpace Codes</a></p>

Result:

Dashed Border

In this example, I've changed the border to "dashed".

Copy the following code:

<form action="/html/tags/html_form_tag_action.cfm" method="post">
<textarea name="comments" id="comments" style="width:200px;height:100px;font-family:cursive;border:dashed 12px #6DB72C;">
Enter your comments here...

...and watch your comment box grow scrollbars!
</textarea><br>
<input type="submit" value="Submit">
</form>
<p style="font-family:verdana,arial,sans-serif;font-size:10px;"><a href="http://www.quackit.com/myspace/codes/">MySpace Codes</a></p>

Result:

Double Borders

Copy the following code:

<form action="/html/tags/html_form_tag_action.cfm" method="post">
<textarea name="comments" id="comments" style="width:200px;height:100px;font-family:cursive;border:double 12px #6DB72C;">
Enter your comments here...

...and watch your comment box grow scrollbars!
</textarea><br>
<input type="submit" value="Submit">
</form>
<p style="font-family:verdana,arial,sans-serif;font-size:10px;"><a href="http://www.quackit.com/myspace/codes/">MySpace Codes</a></p>

Result:

Ridged Border

Copy the following code:

<form action="/html/tags/html_form_tag_action.cfm" method="post">
<textarea name="comments" id="comments" style="width:200px;height:100px;font-family:cursive;border:ridge 12px #6DB72C;">
Enter your comments here...

...and watch your comment box grow scrollbars!
</textarea><br>
<input type="submit" value="Submit">
</form>
<p style="font-family:verdana,arial,sans-serif;font-size:10px;"><a href="http://www.quackit.com/myspace/codes/">MySpace Codes</a></p>

Result:

Outset Border

Copy the following code:

<form action="/html/tags/html_form_tag_action.cfm" method="post">
<textarea name="comments" id="comments" style="width:200px;height:100px;font-family:cursive;border:outset 12px #6DB72C;">
Enter your comments here...

...and watch your comment box grow scrollbars!
</textarea><br>
<input type="submit" value="Submit">
</form>
<p style="font-family:verdana,arial,sans-serif;font-size:10px;"><a href="http://www.quackit.com/myspace/codes/">MySpace Codes</a></p>

Result:

Inset Border

Copy the following code:

<form action="/html/tags/html_form_tag_action.cfm" method="post">
<textarea name="comments" id="comments" style="width:200px;height:100px;font-family:cursive;border:inset 12px #6DB72C;">
Enter your comments here...

...and watch your comment box grow scrollbars!
</textarea><br>
<input type="submit" value="Submit">
</form>
<p style="font-family:verdana,arial,sans-serif;font-size:10px;"><a href="http://www.quackit.com/myspace/codes/">MySpace Codes</a></p>

Result:

Mixed Borders

This is where it can get really interesting. You can specify a different border for each side of your comment box. Try changing the values for some cool results!

Copy the following code:

<form action="/html/tags/html_form_tag_action.cfm" method="post">
<textarea name="comments" id="comments" style="width:200px;height:100px;font-family:cursive;border-top:1px solid #000000;border-right:70px solid #9CE75A;border-bottom:4px solid #9CE75A;border-left:10px solid #6DB72C;">
Enter your comments here...

...and watch your comment box grow scrollbars!
</textarea><br>
<input type="submit" value="Submit">
</form>
<p style="font-family:verdana,arial,sans-serif;font-size:10px;"><a href="http://www.quackit.com/myspace/codes/">MySpace Codes</a></p>

Result:

More Comment Box Tricks!

You can also...

Enjoy this website?

Link to this page (copy/paste into your own website or blog):
<a href="http://www.quackit.com/html/codes/comment_box_borders.cfm">Comment Box Borders</a> from Quackit.com
Add this page to your favorite social bookmarks sites:
Add this page to your Favorites