XHTML and CSS - Border
Border
In this tutorial we're going to learn about the border in CSS, the border is the area that outlines the padding. The border property has 3 property's you need to set, the first one is border-color, the second one is the border-width of the border, the last property you need to set is the border-style, there are a few border styles you can set there's dotted, slashed, dashed, double, grove, inset, outset and solid. I'm going to be using solid in this tutorial but you can use whatever style you want.
<html> <head> <title> This is the title. </title> <style type="text/css"> h1 { background-color: yellow; padding: 25px; border-color: blue; border-width: 2px; border-style: solid; } </style> </head> <body> <h1>This is a header.</h1> </body> </html>
Now when you refresh your page you can see we have a solid red border around our element. Each side can have it's own border, you can do this with, border-top-value, border-left-value, border-right-value and border-bottom-value.
<html> <head> <title> This is the title. </title> <style type="text/css"> h1 { background-color: yellow; padding: 25px; border-bottom-color: blue; border-bottom-width: 2px; border-bottom-style: solid; } </style> </head> <body> <h1>This is a header.</h1> </body> </html>
Now you'll see that the border is only on the bottom of our element.

Page generated in 0.0045 seconds.