HTML/CSS/Box Model/border width
Содержание
border-width: 5px 6px 7px 8px
<!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>
<p>
I hear and I forget. I see and I remember. I do and I understand.
- Confucius
</p>
</body>
</html>
border-width: medium
<?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>
<div>this is a test. </div>
</body>
</html>
border-width: thick
<?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>
<div>this is a test. </div>
</body>
</html>
border-width: thin
<?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>
<div>this is a test. </div>
</body>
</html>
border-width: thin medium thick 3px
<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>
<p>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.</p>
</body>
</html>
Four shorthand properties can be specified for border-width
<!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>
<div id="shorthand-sides">
border-top, border-right, border-bottom, border-left
</div>
</body>
</html>
The border-width property can take either one of three keywords or a length value.
<!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>
<div id="border-width">
<div id="thin">thin</div>
<div id="medium">medium</div>
<div id="thick">thick</div>
</div>
</body>
</html>