CSS Border

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.

Posted on July 22, 2014 in CSS

Share the Story

Leave a reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Back to Top