HTML/CSS/Box Model/border style
Содержание
- 1 All border styles
- 2 border-style: dashed
- 3 border-style: dotted
- 4 border-style: double
- 5 border-style: groove
- 6 border-style: hidden;
- 7 border-style: inset
- 8 border-style: none
- 9 border-style: outset
- 10 border-style: ridge
- 11 Border styles, color and size
- 12 border-style: solid
- 13 border-style: solid dashed double dotted
- 14 Individual border-style properties can be combined into a single property.
- 15 Shading border for paragraph
- 16 Use different border style to highlight
- 17 Various border-styles
- 18 When no border-color is specified, the border color is the value of the color property.
All border styles
<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;
border-style: dashed;
border-style: solid;
border-style: double;
border-style: groove;
border-style: ridge;
border-style: inset;
border-style: outset;
border-style: none;
</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 xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head> <title>border-style</title> <style rel="stylesheet" type="text/css">
div {
padding: 3px; border-color: crimson; border-width: 3px; margin: 5px; float: left; width: 50px; height: 50px;
} div#dashed {border-style: dashed;}
</style> </head> <body>
</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 xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head> <title>border-style</title> <style rel="stylesheet" type="text/css">
div {
padding: 3px; border-color: crimson; border-width: 3px; margin: 5px; float: left; width: 50px; height: 50px;
} div#dotted {border-style: dotted;}
</style> </head> <body>
</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 xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head> <title>border-style</title> <style rel="stylesheet" type="text/css">
div {
padding: 3px; border-color: crimson; border-width: 3px; margin: 5px; float: left; width: 50px; height: 50px;
} div#double {border-style: double;}
</style> </head> <body>
</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 xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head> <title>border-style</title> <style rel="stylesheet" type="text/css">
div {
padding: 3px; border-color: crimson; border-width: 3px; margin: 5px; float: left; width: 50px; height: 50px;
} div#groove {border-style: groove;}
</style> </head> <body>
</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 xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head> <title>border-style</title> <style rel="stylesheet" type="text/css">
div {
padding: 3px; border-color: crimson; border-width: 3px; margin: 5px; float: left; width: 50px; height: 50px; background: red;
} div#hidden {border-style: hidden;}
</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 xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head> <title>border-style</title> <style rel="stylesheet" type="text/css">
div {
padding: 3px; border-color: crimson; border-width: 3px; margin: 5px; float: left; width: 50px; height: 50px;
} div#inset {border-style: inset; }
</style> </head> <body>
</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 xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head> <title>border-style</title> <style rel="stylesheet" type="text/css">
div {
padding: 3px; border-color: crimson; border-width: 3px; margin: 5px; float: left; width: 50px; height: 50px;
} div#none {border-style: none; }
</style> </head> <body>
</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 xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head> <title>border-style</title> <style rel="stylesheet" type="text/css">
div {
padding: 3px; border-color: crimson; border-width: 3px; margin: 5px; float: left; width: 50px; height: 50px;
} div#outset {border-style: outset;}
</style> </head> <body>
</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 xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head> <title>border-style</title> <style rel="stylesheet" type="text/css">
div {
padding: 3px; border-color: crimson; border-width: 3px; margin: 5px; float: left; width: 50px; height: 50px;
} div#ridge {border-style: ridge; }
</style> </head> <body>
</body>
</html>
</source>
Border styles, color and size
<source lang="html4strict">
<html> <head> <title>Border Samples</title> <style> body {
background-color: rgb(50%, 50%, 50%); font-size: 1.1em; color: yellow;
} .dotted {
border-color: yellow; border-width: medium; border-style: dotted; margin-right: 75%; text-align: center; margin-left: 10%;
} .dashed {
border-color: yellow; border-width: medium; border-style: dashed; margin-right: 75%; text-align: center; margin-left: 10%;
} .solid {
border-color: yellow; border-width: medium; border-style: solid; margin-right: 75%; text-align: center; margin-left: 10%;
} .double {
border-color: yellow; border-width: medium; border-style: double; margin-right: 75%; text-align: center; margin-left: 10%;
} .groove {
border-color: yellow; border-width: medium; border-style: groove; margin-right: 75%; text-align: center; margin-left: 10%;
} .ridge {
border-color: yellow; border-width: medium; border-style: ridge; margin-right: 75%; text-align: center; margin-left: 10%;
} .inset {
border-color: yellow; border-width: medium; border-style: inset; margin-right: 75%; text-align: center; margin-left: 10%;
} .outset {
border-color: yellow; border-width: medium; border-style: outset; margin-right: 75%; text-align: center; margin-left: 10%;
} </style> </head> <body>
Dotted
Dashed
Solid
Double
Groove
Ridge
Inset
Outset
</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 xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head> <title>border-style</title> <style rel="stylesheet" type="text/css">
div {
padding: 3px; border-color: crimson; border-width: 3px; margin: 5px; float: left; width: 50px; height: 50px;
} div#solid {border-style: solid; }
</style> </head> <body>
</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: 5px 6px 7px 8px; border-style: solid dashed double dotted; } </style> </head> <body>
I hear and I forget. I see and I remember. I do and I understand. - Confucius
</body> </html> </source>
Individual border-style properties can be combined into a single property.
<source lang="html4strict">
<!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" xml:lang="en">
<head> <title>border</title> <style rel="stylesheet" type="text/css">
div#border-style {
border-style: solid dashed double inset;
}
</style> </head> <body>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
</body>
</html>
</source>
Shading border for paragraph
<source lang="html4strict">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"> <head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title></title>
<style type="text/css" media="Screen"> div {
padding: 10px; margin-bottom: 15px; border: 2px solid black;
} p {
margin-top: 0px; margin-bottom: 10px; padding-right: 5px; background-color: gold; padding-top: 5px; padding-bottom: 5px; border-left: 1px solid gray; border-right: 2px solid black; border-top: 1px solid gray; border-bottom: 2px solid black;
} </style> </head> <body>
Normal Paragraph
</body> </html>
</source>
Use different border style to highlight
<source lang="html4strict">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"> <head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>A Web page</title>
<style type="text/css" media="Screen"> body {
background-color: black; font-family: Georgia, serif;
} p {
font-family: Georgia, serif; font-size: 13px; color: white; padding-left: 25px;
} .large {
font-size: 130%; border: 1px dotted white; padding: 5px;
} .small {
font-size: 90%; border: 2px dashed #555; padding: 10px;
} </style> </head> <body>
Another paragraph, with large italic and small bold text, also in Verdana.
</body> </html>
</source>
Various border-styles
<source lang="html4strict">
<?xml version = "1.0"?> <!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>Borders</title> <style type = "text/css"> body { background-color: #ccffcc } div { text-align: center; margin-bottom: .3em; width: 50%; position: relative; left: 25%; padding: .3em } </style> </head> <body>
</body>
</html>
</source>
When no border-color is specified, the border color is the value of the color property.
<source lang="html4strict">
<!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" xml:lang="en">
<head> <title>border</title> <style rel="stylesheet" type="text/css">
div#color-default {
color: crimson; border-style: solid dotted;
}
</style> </head> <body>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
</body>
</html>
</source>