CodeLab
Tutorials For Everyone
Run
Learn CSS
<!Doctype HTML> <html> <head> <title>CSS Borders Style</title> <style> .dotted{border-style: dotted;} .dashed{border-style: dashed;} .solid{border-style: solid;} .double{border-style: double;} .groove{border-style: groove;} .ridge{border-style: ridge;} .inset{border-style: inset;} .outset{border-style: outset;} .hidden{border-style: hidden;} .none{border-style: none;} .combination1{border-style: dotted double groove ridge;} .combination2{border-style: dashed solid outset hidden;} </style> </head> <body> <h2>CSS border style</h2> The border style property can define the style of border of an element. See the illustrations below. <p class="dotted">Dotted border of this paragraph.</p> <p class="dashed">Dashed border of this paragraph.</p> <p class="solid">A solid border of this paragraph.</p> <p class="double">A double border of this paragraph.</p> <p class="groove">This paragraph has groove border style.</p> <p class="ridge">Ridge border of this paragraph.</p> <p class="inset">The border style is inset.</p> <p class="outset">The border style is outset.</p> <p class="none">No border.</p> <p class="hidden">Border is hidden of this paragraph.</p> <p class="combination1">Combination of border styles for different sides of this paragraph.</p> <p class="combination2">Combination of border styles for different sides of this paragraph.</p> </body> </html>
Editor Commands
Ctrl
F
Find
Ctrl
G
Find Next
Ctrl
⇧
G
Find Previous
Ctrl
⇧
F
Find & Replace
Ctrl
]
Indent Code Right
Ctrl
[
Indent Code Left
⇧
Tab
Auto Indent Code
Ctrl
/
Line Comment
Ctrl
Alt
/
Block Comment
TutsInsider Actions
Alt
S
Run Code
Ctrl
C
Copy Editor Code
Ctrl
A
Select All Editor Code
Ctrl
S
Save/Download
Ctrl
Alt
X
Rotate
Ctrl
Alt
T
Switch Theme
Ctrl
⇧
C
Open Console
Esc
Close Console