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.

<form action="/html/tags/html_form_tag_action.cfm" method="post">
<textarea name="comments" id="comments" style="width:96%;height:150px;padding:2%;font-size:1.2em;border:1px solid #6DB72C;">
Enter your comments here...

...and watch your comment box grow scrollbars!
</textarea><br>
<input type="submit" value="Submit">
</form>

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).

<form action="/html/tags/html_form_tag_action.cfm" method="post">
<textarea name="comments" id="comments" style="width:93%;height:150px;padding:2%;font-size:1.2em;border:10px solid #6DB72C;">
Enter your comments here...

...and watch your comment box grow scrollbars!
</textarea><br>
<input type="submit" value="Submit">
</form>

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".

<form action="/html/tags/html_form_tag_action.cfm" method="post">
<textarea name="comments" id="comments" style="width:93%;height:150px;padding:2%;font-size:1.2em;border:10px dotted #6DB72C;">
Enter your comments here...

...and watch your comment box grow scrollbars!
</textarea><br>
<input type="submit" value="Submit">
</form>

Dashed Border

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

<form action="/html/tags/html_form_tag_action.cfm" method="post">
<textarea name="comments" id="comments" style="width:93%;height:150px;padding:2%;font-size:1.2em;border:10px dashed #6DB72C;">
Enter your comments here...

...and watch your comment box grow scrollbars!
</textarea><br>
<input type="submit" value="Submit">
</form>

Grooved Border

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

<form action="/html/tags/html_form_tag_action.cfm" method="post">
<textarea name="comments" id="comments" style="width:92%;height:140px;padding:2%;font-size:1.2em;border:12px groove #6DB72C;">
Enter your comments here...

...and watch your comment box grow scrollbars!
</textarea><br>
<input type="submit" value="Submit">
</form>

Double Borders

<form action="/html/tags/html_form_tag_action.cfm" method="post">
<textarea name="comments" id="comments" style="width:92%;height:140px;padding:2%;font-size:1.2em;border:12px double #6DB72C;">
Enter your comments here...

...and watch your comment box grow scrollbars!
</textarea><br>
<input type="submit" value="Submit">
</form>

Ridged Border

<form action="/html/tags/html_form_tag_action.cfm" method="post">
<textarea name="comments" id="comments" style="width:92%;height:140px;padding:2%;font-size:1.2em;border:12px ridge #6DB72C;">
Enter your comments here...

...and watch your comment box grow scrollbars!
</textarea><br>
<input type="submit" value="Submit">
</form>

Outset Border

<form action="/html/tags/html_form_tag_action.cfm" method="post">
<textarea name="comments" id="comments" style="width:92%;height:140px;padding:2%;font-size:1.2em;border:12px outset #6DB72C;">
Enter your comments here...

...and watch your comment box grow scrollbars!
</textarea><br>
<input type="submit" value="Submit">
</form>

Inset Border

<form action="/html/tags/html_form_tag_action.cfm" method="post">
<textarea name="comments" id="comments" style="width:92%;height:140px;padding:2%;font-size:1.2em;border:12px inset #6DB72C;">
Enter your comments here...

...and watch your comment box grow scrollbars!
</textarea><br>
<input type="submit" value="Submit">
</form>

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!

<form action="/html/tags/html_form_tag_action.cfm" method="post">
<textarea name="comments" id="comments" style="width:91%;height:150px;padding:2%;font-size:1.2em;border-top:1px dotted #000000;border-right:20px 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>

Web.QHMIT.com