HTML/CSS/Box Model/border width
Содержание
border-width: 5px 6px 7px 8px
<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>
border-width: medium
<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">
div{ text-align: center;
margin-bottom: 1em;
padding: .5em;
border-width: medium;
border-color: blue;
border-style: groove; }
</style>
</head>
<body>
</body>
</html>
</source>
border-width: thick
<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">
div{ text-align: center;
margin-bottom: 1em;
padding: .5em;
border-width: thick;
border-color: blue;
border-style: groove; }
</style>
</head>
<body>
</body>
</html>
</source>
border-width: thin
<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">
div{ text-align: center;
margin-bottom: 1em;
padding: .5em;
border-width: thin;
border-color: blue;
border-style: groove; }
</style>
</head>
<body>
</body>
</html>
</source>
border-width: thin medium thick 3px
<source lang="html4strict">
<html>
<head>
<title>Border Width Properties</title>
<style>
body {font-size: 1.3em;}
p {background-color: white;
border-style: solid; border-width: thin medium thick 3px;}
</style> </head> <body>
Paragraph features:a solid border style with the top set to "thin," the right set to "medium," the bottom set to "thick," and the left set to 3 pixels.
</body> </html>
</source>
Four shorthand properties can be specified for border-width
<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#shorthand-sides {
border-top: 1px solid pink; border-right: 1px solid crimson; border-bottom: 1px solid pink; border-left: 1px solid crimson; padding: 5px;
}
</style> </head> <body>
border-top, border-right, border-bottom, border-left
</body>
</html>
</source>
The border-width property can take either one of three keywords or a length value.
<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-width {
overflow: hidden;
} div#border-width div {
float: left; border-style: solid; border-color: red; margin: 0 5px;
} div#thin {
border-width: thin;
} div#medium {
border-width: medium;
} div#thick {
border-width: thick;
}
</style> </head> <body>
</body>
</html>
</source>
