Search within TutorialsPark

CSS border-style Property


To set the style used to draw the border


Definition and Notes.

1. The CSS border-style is a shorthand property to set the style for overall border of an element or for each side individually.

2. For the border to appear the value must be anything other than none, if the value is unrecognized then it is inferred as solid.

3. Seperate styles can be assigned for each borders using the 1 to 4 values.

a. border-style: dashed dotted solid ridge (i.e clockwise starting from top)

dashed : top

dotted : right

solid : bottom

ridge : left


b. border-style: dashed dotted solid (i.e clockwise starting from top)

dashed : top

dotted : right and left

solid : bottom


c. border-style: dashed dotted (i.e clockwise starting from top)

dashed : top and bottom

dotted : right and left


d. border-style: dashed

dashed : all edges of the border



Syntax:

CSS border-style property. internetexplorer safari firefox opera chrome

View in Splitscreen»

Code-Editor:

Note- If the border-style is set to none, then the value of border-width will be ignored and set to 0

Property Values

Value Description Appearance
dotted Border made up of a series of square dots

dotted

dashed Border made up of a series of short-lines

dashed

solid A plain solid line

solid

double Border made up of two solid lines

double

groove Border appears to be carved into the page

groove

ridge Border appears to stick out from the page

ridge

inset Border appears to be embedded into the page

inset

outset The Border appears to be comming out of the screen

outset

none No Border is shown at all

none

inherit Inherits border-style from the parent element

inherit


Specifications

Specs Value
Name border-style
Value none | hidden | dotted | solid | double | groove | ridge | inset | outset
Initial Value none
Applies to all elements.
Javascript syntax object.style.borderStyle=" ridge "
Inherited No
Computed Value Same as declared value.
Browser Support internetexplorer safari firefox opera chrome

Related Examples.