Textbox Border

This page contains HTML code for creating a border around an HTML textbox. Feel free to copy and paste this textbox border code into your own website, blog, MySpace page, or other HTML document. And feel free to modify the code as you wish.

Also, please consider keeping the link back to this website - if you do it will be very much appreciated!

Thin Solid Textbox Border

The easiest way to add a border to an HTML textbox is to use the CSS border property. The border property is shorthand for the border-width, border-style and border-color properties. Therefore, you need to provide three values - one for width, one for style, and one for color.

Here's an example:

Source Code	Result
<!-- Codes by PuStudy.Com --> <textarea rows="5" cols="20" style="background-color: GreenYellow;color:OrangeRed;border:1px solid Green;"> This HTML textbox has a thin, solid border. </textarea>	This HTML textbox has a thin, solid border.

To choose a color, use the color picker.

Thick Border

You can increase the thickness by increasing the first value. Here, we increase it from 1px (1 pixel), to 10px (10 pixels)

Source Code	Result
<!-- Codes by PuStudy.Com --> <textarea rows="5" cols="20" style="background-color: GreenYellow;color:OrangeRed;border:10px solid Green;"> This HTML textbox has a thick, solid border. </textarea>	This HTML textbox has a thick, solid border.

To choose a color, use the color picker.

Thin Dotted Border

To create a dotted border, change the second value to dotted.

Source Code	Result
<!-- Codes by PuStudy.Com --> <textarea rows="5" cols="20" style="background-color: GreenYellow;color:OrangeRed;border:1px dotted Green;"> This HTML textbox has a thin, dotted border. </textarea>	This HTML textbox has a thin, dotted border.

To choose a color, use the color picker.

Thick Dotted Border

Source Code	Result
<!-- Codes by PuStudy.Com --> <textarea rows="5" cols="20" style="background-color: GreenYellow;color:OrangeRed;border:10px dotted Green;"> This HTML textbox has a thick, dotted border. </textarea>	This HTML textbox has a thick, dotted border.

To choose a color, use the color picker.

Double Border

To create a double border, change the second value to double.

Source Code	Result
<!-- Codes by PuStudy.Com --> <textarea rows="5" cols="20" style="background-color: GreenYellow;color:OrangeRed;border:3px double Green;"> This HTML textbox has a double border. </textarea>	This HTML textbox has a double border.

To choose a color, use the color picker.

Grooved Border

To create a grooved border, change the second value to groove. In this case, I've also lightened the color of the border (to "LimeGreen"), so as to highlight the "groove" effect.

Source Code	Result
<!-- Codes by PuStudy.Com --> <textarea rows="5" cols="20" style="background-color: GreenYellow;color:OrangeRed;border:5px groove LimeGreen;"> This HTML textbox has a grooved border. </textarea>	This HTML textbox has a grooved border.

To choose a color, use the color picker.

Outset Border

To create an outset border, change the second value to outset.

Source Code	Result
<!-- Codes by PuStudy.Com --> <textarea rows="5" cols="20" style="background-color: GreenYellow;color:OrangeRed;border:5px outset LimeGreen;"> This HTML textbox has an outset border. </textarea>	This HTML textbox has an outset border.

To choose a color, use the color picker.

Inset Border

To create an inset border, change the second value to inset.

Source Code	Result
<!-- Codes by PuStudy.Com --> <textarea rows="5" cols="20" style="background-color: GreenYellow;color:OrangeRed;border:5px inset LimeGreen;"> This HTML textbox has an inset border. </textarea>	This HTML textbox has an inset border.

To choose a color, use the color picker.

Ridged Border

To create a ridged border, change the second value to ridge.

Source Code	Result
<!-- Codes by PuStudy.Com --> <textarea rows="5" cols="20" style="background-color: GreenYellow;color:OrangeRed;border:5px ridge LimeGreen;"> This HTML textbox has a ridged border. </textarea>	This HTML textbox has a ridged border.

To choose a color, use the color picker.

Mixed Border

You can create a different effect for each side of your textbox. To do this, use the border-top, border-right, border-bottom, and border-left properties.

Source Code	Result
<!-- Codes by PuStudy.Com --> <textarea rows="5" cols="20" style="background-color: GreenYellow;color:OrangeRed;border-top:5px dotted LimeGreen;border-right:1px dashed LimeGreen;border-bottom:5px solid LimeGreen;border-left:15px solid LimeGreen;"> This HTML textbox has a mixed border - each side is different. </textarea>	This HTML textbox has a mixed border - each side is different.

To choose a color, use the color picker.