FREE Hosting!

With every domain name you register with ZappyHost, you get FREE hosting.

$1.99 Domain Names

With every new non-domain purchase thru ZappyHost, you get a domain name for only $1.99.

Comment Box Borders

Related:
• Comment Box Code
• Comment Box Colors
• Comment Box Pictures
• MySpace Comment Box Code
• MySpace Comment Box Generator
• Form to Email Code
• 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