border-top-style property, border-right-style property, border-bottom-style property, border-left-style property.
- The border-top-style CSS property sets the line style of an element's top border.
- The border-right-style CSS property sets the line style of an element's right border.
- The border-bottom-style CSS property sets the line style of an element's bottom border.
- The border-left-style CSS property sets the line style of an element's left border.
border-style property.
The border-style property sets the style of an element's four borders. The border-style property can have from one to four values:
'none | hidden | dotted | dashed | solid | double | dot-dash | dot-dot-dash | wave | groove | ridge | inset | outset'
border-top-style value, border-right-style value, border-bottom-style value, border-left-style value, border-style value can have from one of these four values:
'none | hidden | dotted | dashed | solid | double | dot-dash | dot-dot-dash | wave | groove | ridge | inset | outset'
The none value Specifies no border. This is default.
1. Type this following website source code on web editor:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta content="text/html; charset=ISO-8859-1"
http-equiv="content-type">
<title>Border Properties</title>
</head>
<body>
<p style="text-align: center;"><span
style="font-family: Courier New,Courier,monospace;">none</span></p>
<p></p>
<p style="border-style: dashed; text-align: center;"><span
style="font-family: Courier New,Courier,monospace;">dashed</span></p>
<p></p>
<p style="border-style: double; text-align: center;">double</p>
<p></p>
<p style="border-style: dotted; text-align: center;"><span
style="font-family: Courier New,Courier,monospace;">dotted</span></p>
<p></p>
<p style="border-style: groove; text-align: center;">groove</p>
<p></p>
<p style="border-style: inset; text-align: center;">inset</p>
<p></p>
<p style="border-style: ridge; text-align: center;">ridge</p>
<p></p>
<p style="border-style: solid; text-align: center;">solid</p>
<p></p>
<p style="border-style: outset; text-align: center;">outset</p>
</body>
</html>
2. Save file as BorderProperties1.html
3. Open in the Internet Browser.
Output
none
dashed
double
dotted
groove
inset
ridge
solid
outset
Tidak ada komentar:
Posting Komentar