Textbox Border

This page demonstrates how to create a textbox border around your HTML textboxes.

Textboxes are input fields created by the <textarea> element. You can use the CSS border property to add a border around your HTML textboxes. You can also use border-width, border-style, and border-color, but the border property covers all of these anyway.

Here are some examples of textbox borders.

Solid Textbox Border

Source Code	Result
<form action="https://web.html.support/html-codes/textboxes/submitted.cfm"> <textarea name="myTextBox" cols="50" rows="5" style="border:3px solid #F7730E;"> Enter some text... </textarea> <br /> <input type="submit" /> </form>	Enter some text...

Dashed Textbox Border

Source Code	Result
<form action="https://web.html.support/html-codes/textboxes/submitted.cfm"> <textarea name="myTextBox" cols="50" rows="5" style="border:3px dashed #F7730E;"> Enter some text... </textarea> <br /> <input type="submit" /> </form>	Enter some text...

Dotted Textbox Border

Source Code	Result
<form action="https://web.html.support/html-codes/textboxes/submitted.cfm"> <textarea name="myTextBox" cols="50" rows="5" style="border:3px dotted #F7730E;"> Enter some text... </textarea> <br /> <input type="submit" /> </form>	Enter some text...

Double Textbox Border

Source Code	Result
<form action="https://web.html.support/html-codes/textboxes/submitted.cfm"> <textarea name="myTextBox" cols="50" rows="5" style="border:3px double #F7730E;"> Enter some text... </textarea> <br /> <input type="submit" /> </form>	Enter some text...

Outset Textbox Border

Source Code	Result
<form action="https://web.html.support/html-codes/textboxes/submitted.cfm"> <textarea name="myTextBox" cols="50" rows="5" style="border:6px outset #F7730E;"> Enter some text... </textarea> <br /> <input type="submit" /> </form>	Enter some text...

Inset Textbox Border

Source Code	Result
<form action="https://web.html.support/html-codes/textboxes/submitted.cfm"> <textarea name="myTextBox" cols="50" rows="5" style="border:6px inset #F7730E;"> Enter some text... </textarea> <br /> <input type="submit" /> </form>	Enter some text...

Grooved Textbox Border

Source Code	Result
<form action="https://web.html.support/html-codes/textboxes/submitted.cfm"> <textarea name="myTextBox" cols="50" rows="5" style="border:6px groove #F7730E;"> Enter some text... </textarea> <br /> <input type="submit" /> </form>	Enter some text...

Ridged Textbox Border

Source Code	Result
<form action="https://web.html.support/html-codes/textboxes/submitted.cfm"> <textarea name="myTextBox" cols="50" rows="5" style="border:6px ridge #F7730E;"> Enter some text... </textarea> <br /> <input type="submit" /> </form>	Enter some text...

Various Textbox Borders

You can also specify different styles/colors/widths for each side of your textbox. You can also specify that the border should only be placed on one/two/three sides of the text box.

Source Code	Result
<form action="https://web.html.support/html-codes/textboxes/submitted.cfm"> <textarea name="myTextBox" cols="50" rows="5" style="border-top:3px double #000000;border-right:1px dotted #000000;border-bottom:5px double #F7730E;border-left:10px solid #F7730E;"> Enter some text... </textarea> <br /> <input type="submit" /> </form>	Enter some text...

Textbox Border on 1 Side Only

You can also specify that the border should only be placed on one side of the text box. Example:

Source Code	Result
<form action="https://web.html.support/html-codes/textboxes/submitted.cfm"> <textarea name="myTextBox" cols="50" rows="5" style="border-top:3px double #F7730E;"> Enter some text... </textarea> <br /> <input type="submit" /> </form>	Enter some text...

Textbox Border on 1 Side Only

You can also use the above technique to place a border on two or three sides of the text box. Example:

Source Code	Result
<form action="https://web.html.support/html-codes/textboxes/submitted.cfm"> <textarea name="myTextBox" cols="50" rows="5" style="border-top:3px double #F7730E;border-bottom:3px double #F7730E;"> Enter some text... </textarea> <br /> <input type="submit" /> </form>	Enter some text...