CSS

Working with borders in CSS
Previous Home Next

Border Style

The border-style property specifies what kind of border to display.

Border-styleValues:
dotted:Defines a dotted border
dashed:Defines a dashed border
solid:Defines a solid border
double:Defines two borders. The width of the two borders are the same as the border-width value
groove:Defines a 3D grooved border. The effect depends on the border-color value
ridge:Defines a 3D ridged border. The effect depends on the border-color value
inset:Defines a 3D inset border. The effect depends on the border-color value
outset:Defines a 3D outset border. The effect depends on the border-color value
none:Defines no border

 

Border Width

The border-width property is used to set the width of the border.The width is set in pixels, or by using one of the three pre-defined values: thin, medium, or thick.

p.one
{
border-style:solid;
border-width:5px;
}
p.two
{
border-style:solid;
border-width:medium;
}

Border Color

The border-color property is used to set the color of the border. The color can be set by:

  • name - specify a color name, like "red"
  • RGB - specify a RGB value, like "rgb(255,0,0)"
  • Hex - specify a hex value, like "#ff0000"
You can also set the border color to "transparent".

p.one
{
border-style:solid;
border-color:red;
}
p.two
{
border-style:solid;
border-color:#98bf21;
}

Border - Individual sides

In CSS it is possible to specify different borders for different sides.

p
{
border-top-style:dotted;
border-right-style:solid;
border-bottom-style:dotted;
border-left-style:solid;
}
Previous Home Next