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>