HTML/CSS/Box Model/border width

Материал из Web эксперт
Перейти к: навигация, поиск

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>
Источник — «http://wbex.ru/index.php?title=HTML/CSS/Box_Model/border_width&oldid=5299»