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!
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 |
---|---|
To choose a color, use the color picker.
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 |
---|---|
To choose a color, use the color picker.
To create a dotted border, change the second value to dotted
.
Source Code | Result |
---|---|
To choose a color, use the color picker.
Source Code | Result |
---|---|
To choose a color, use the color picker.
To create a double border, change the second value to double
.
Source Code | Result |
---|---|
To choose a color, use the color picker.
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 |
---|---|
To choose a color, use the color picker.
To create an outset border, change the second value to outset
.
Source Code | Result |
---|---|
To choose a color, use the color picker.
To create an inset border, change the second value to inset
.
Source Code | Result |
---|---|
To choose a color, use the color picker.
To create a ridged border, change the second value to ridge
.
Source Code | Result |
---|---|
To choose a color, use the color picker.
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 |
---|---|
To choose a color, use the color picker.