HTML/CSS/CSS Attributes and Javascript Style Properties/border style
Содержание
- 1 Border style all values
- 2 border-style: dashed
- 3 border-style: dotted
- 4 border-style: double
- 5 "border-style" Example
- 6 border-style: groove
- 7 border-style: hidden
- 8 border-style: inset
- 9 border-style: none
- 10 border-style: outset
- 11 border-style: ridge
- 12 border style shorthand with three values
- 13 border style shorthand with two values
- 14 border-style: solid
- 15 border-style: solid dashed dotted;
- 16 border-style: solid dashed double dotted;
- 17 border-style: solid dotted;
- 18 The border-style Property
Border style all values
<source lang="html4strict">
<?xml version="1.0" encoding="iso-8859-1"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>A CSS Example</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <style rel="stylesheet" type="text/css"> body {
font-family: arial, verdana, sans-serif;
} p {
border-color: #000000;
} .none {
border-style: none;
} .solid {
border-style: solid;
} .dotted {
border-style: dotted;
} .dashed {
border-style: dashed;
} .double {
border-style: double;
} .groove {
border-style: groove;
} .ridge {
border-style: ridge;
} .inset {
border-style: inset;
} .outset {
border-style: outset;
} .hidden {
border-style: hidden;
} </style> </head> <body>
This paragraph has a border-style property set to none.
This paragraph has a border-style property set to solid.
This paragraph has a border-style property set to dotted.
This paragraph has a border-style property set to dashed.
This paragraph has a border-style property set to double.
This paragraph has a border-style property set to groove.
This paragraph has a border-style property set to ridge.
This paragraph has a border-style property set to inset.
This paragraph has a border-style property set to outset.
This paragraph has a border-style property set to hidden.
</body> </html>
</source>
border-style: dashed
<source lang="html4strict">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title></title>
<style type="text/css">
div {
padding: 10px;
margin: 10px;
border: thick black;
}
</style>
</head>
<body>
border-style: dashed;
</body> </html> </source>
border-style: dotted
<source lang="html4strict">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title></title>
<style type="text/css">
div {
padding: 10px;
margin: 10px;
border: thick black;
}
</style>
</head>
<body>
border-style: dotted;
</body> </html> </source>
border-style: double
<source lang="html4strict">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title></title>
<style type="text/css">
div {
padding: 10px;
margin: 10px;
border: thick black;
}
</style>
</head>
<body>
border-style: double;
</body> </html> </source>
"border-style" Example
<source lang="html4strict">
<html> <head> <style> .style1 {
border:5px solid #cccccc; border-style:dashed; font-family:verdana; font-weight:bold
} .style2 {
border:"none"; font-family:verdana; font-weight:bold
} </style> </head> <body> Move mouse in and out to see the style change.
</body> </html>
</source>
border-style: groove
<source lang="html4strict">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title></title>
<style type="text/css">
div {
padding: 10px;
margin: 10px;
border: thick black;
}
</style>
</head>
<body>
border-style: groove;
</body> </html> </source>
<source lang="html4strict">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title></title>
<style type="text/css">
div {
padding: 10px;
margin: 10px;
border: thick black;
}
</style>
</head>
<body>
</body> </html> </source>
border-style: inset
<source lang="html4strict">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title></title>
<style type="text/css">
div {
padding: 10px;
margin: 10px;
border: thick black;
}
</style>
</head>
<body>
border-style: inset;
</body> </html> </source>
border-style: none
<source lang="html4strict">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title></title>
<style type="text/css">
div {
padding: 10px;
margin: 10px;
border: thick black;
}
</style>
</head>
<body>
border-style: none;
</body> </html> </source>
border-style: outset
<source lang="html4strict">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title></title>
<style type="text/css">
div {
padding: 10px;
margin: 10px;
border: thick black;
}
</style>
</head>
<body>
border-style: outset;
</body> </html> </source>
border-style: ridge
<source lang="html4strict">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title></title>
<style type="text/css">
div {
padding: 10px;
margin: 10px;
border: thick black;
}
</style>
</head>
<body>
border-style: ridge;
</body> </html> </source>
border style shorthand with three values
<source lang="html4strict">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title></title>
<style type="text/css">
p {
margin: 20px;
padding: 20px;
width: 200px;
border-width: thin medium thick;
border-style: solid dashed dotted;
}
</style>
</head>
<body>
This is a test. This is a test.
</body> </html> </source>
border style shorthand with two values
<source lang="html4strict">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title></title>
<style type="text/css">
p {
margin: 20px;
padding: 20px;
width: 200px;
border-width: thin thick;
border-style: solid dotted;
}
</style>
</head>
<body>
This is a test. This is a test.
</body> </html> </source>
border-style: solid
<source lang="html4strict">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title></title>
<style type="text/css">
div {
padding: 10px;
margin: 10px;
border: thick black;
}
</style>
</head>
<body>
border-style: solid;
</body> </html> </source>
border-style: solid dashed dotted;
<source lang="html4strict">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title></title>
<style type="text/css">
p {
margin: 20px;
padding: 20px;
width: 200px;
border-width: thin medium thick;
border-style: solid dashed dotted;
}
</style>
</head>
<body>
This is a test. This is a test.
</body> </html> </source>
border-style: solid dashed double dotted;
<source lang="html4strict">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title></title>
<style type="text/css">
p {
margin: 20px;
padding: 20px;
width: 200px;
border-width: thin medium 30px thick;
border-style: solid dashed double dotted;
}
</style>
</head>
<body>
This is a test. This is a test.
</body> </html> </source>
border-style: solid dotted;
<source lang="html4strict">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title></title>
<style type="text/css">
p {
margin: 20px;
padding: 20px;
width: 200px;
border-width: thin thick;
border-style: solid dotted;
}
</style>
</head>
<body>
This is a test. This is a test.
</body> </html> </source>
The border-style Property
<source lang="html4strict">
Value Description none No border. (Equivalent of border-width:0;) solid Border is a single solid line. dotted Border is a series of dots. dashed Border is a series of short lines. double Border is two solid lines; the value of the border-width property creates the sum of the two lines and the space between them. groove Border looks as though it is carved into the page. ridge Border looks the opposite of groove. inset Border makes the box look like it is embedded in the page. outset Border makes the box look like it is coming out of the canvas. hidden Same as none, except in terms of border-conflict resolution for table elements. (See section on tables.)
</source>
