Used to draw a border around an element.
border-width
This property specifies the width of the border.
Applicable values: thin, medium, thick
Or else the values should be specified in pixels e.g., 2px
border-style
This property specifies the line style of the border
Applicable values:
none – no border
hidden – Same as ‘none’, except in terms of border conflict resolution for table elements.
dotted – The border is a series of dots.
dashed – The border is a series of short line segments.
solid – The border is a single line segment.
double – The border is two solid lines. The sum of the two lines and the space between them equals the value of ‘border-width’.
groove – The border looks as though it were carved into the canvas.
ridge – The opposite of ‘groove’: the border looks as though it were coming out of the canvas.
inset – The border makes the box look as though it were embedded in the canvas.
outset – The opposite of ‘inset’: the border makes the box look as though it were coming out of the canvas.
border-color
This property specifies the color of the border
HTML snippet
<div>
Hello world! This is a sample text
</div>CSS snippet
div{
border-width : 2px;
border-style : solid;
border-color : #f00;
background-color : #fff;
}
Output:
The border is applied to the <div> element.
