Borders can surround textboxes, or div elements, and just plain text, or span elements. They have multiple attributes - size, color, roundness, and pattern, which will all be covered in this article.

Border ThicknessEdit

Border thickness is the simplest attribute. Just change the [x]px in the border code - border:1px solid black, border:3px dashed blue. Greater numbers equal greater thicknesses and be sure to include the "px".

This is a 1px border.

This is a 3px border.

This is a 5px border.

This is a 10px border.

Border PatternsEdit

Borders come in a variety of patterns. To change the pattern, change the middle item in the border code - border:1px SOLID black, border:3px DASHED blue.

This is a solid border.

This is a dashed border.

This is a dotted border.

This is a double border.

This is an inset border.

This is an outset border.

This is a ridge border.

Border ColorEdit

Border color, like the thickness, is fairly simple. Change the last item in the border code - border:1px solid BLACK, border:3px dashed BLUE. You can use a hex code, a color name, an RGB code, whatever you'd like to represent the color.

This is a blue border made using color names.

This is a magenta border made using hex codes.

This is a slightly transparent red border made using RGB.

Border RoundnessEdit

Border roundness, or radius, is the only attribute that's not in the border item. Instead, use border-radius:[x]em when applying this to your code - border:1px solid black;border-radius:1em, border:3px dashed blue;border-radius:0.5em. The higher the number is, the more curved your border is, and you can even make a circle with a curved enough border.

This is a 0em border.


This is a 0.5em border.


This is a 1em border.


This is a 5em border.