Comment Box Borders

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

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-size:10px;"><a href="http://www.quackit.com/html/tags/">HTML Reference</a></p>

Result:

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-size:10px;"><a href="http://www.quackit.com/html/html_help.cfm">HTML Help</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-size:10px;"><a href="http://www.quackit.com/html/">HTML Reference</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-size:10px;"><a href="http://www.quackit.com/html/">HTML Help</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-size:10px;"><a href="http://www.quackit.com/html/">HTML Help</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-size:10px;"><a href="http://www.quackit.com/html/">HTML Help</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-size:10px;"><a href="http://www.quackit.com/html/">HTML Help</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-size:10px;"><a href="http://www.quackit.com/html/">HTML</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-size:10px;"><a href="http://www.quackit.com/html/">HTML 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-size:10px;"><a href="http://www.quackit.com/html/">HTML Tutorials</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-size:10px;"><a href="http://www.quackit.com/html/">Learn HTML</a></p>

Result:

More Comment Box Tricks!

You can also...

• Change the color of your comment box
• Add a background picture to your comment box