HTML/CSS/Box Model/border style

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

All border styles

 
<!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>
      <div style="border-style: hidden;">
          border-style: hidden;
      </div>
      <div style="border-style: dotted;">
          border-style: dotted;
      </div>
      <div style="border-style: dashed;">
          border-style: dashed;
      </div>
      <div style="border-style: solid;">
          border-style: solid;
      </div>
      <div style="border-style: double;">
          border-style: double;
      </div>
      <div style="border-style: groove;">
          border-style: groove;
      </div>
      <div style="border-style: ridge;">
          border-style: ridge;
      </div>
      <div style="border-style: inset;">
          border-style: inset;
      </div>
      <div style="border-style: outset;">
          border-style: outset;
      </div>
      <div style="border-style: none;">
          border-style: none;
      </div>
    </body>
  </html>



border-style: dashed

 
<!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>
        <div id="dashed">dashed</div>
    </body>
</html>



border-style: dotted

 
<!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>
        <div id="dotted">dotted</div>
    </body>
</html>



border-style: double

 
<!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>
        <div id="double">double</div>
    </body>
</html>



border-style: groove

 
<!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>
        <div id="groove">groove</div>
    </body>
</html>



border-style: hidden;

 
<!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>
        <div id="hidden">hidden</div>
    </body>
</html>



border-style: inset

 
<!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>
        
        <div id="inset">inset</div>
    </body>
</html>



border-style: none

 
<!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>
        
        <div id="none">none</div>
    </body>
</html>



border-style: outset

 
<!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>
        
        <div id="outset">outset</div>
    </body>
</html>



border-style: ridge

 
<!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>
        <div id="ridge">ridge</div>
    </body>
</html>



Border styles, color and size

 

<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>
<p class="dotted">Dotted</p>
<p class="dashed">Dashed</p>
<p class="solid">Solid</p>
<p class="double">Double</p>
<p class="groove">Groove</p>
<p class="ridge">Ridge</p>
<p class="inset">Inset</p>
<p class="outset">Outset</p>
<hr />
</body>
</html>



border-style: solid

 
<!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>
        <div id="solid">solid</div>
    </body>
</html>



border-style: solid dashed double dotted

 
<!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>



Individual border-style properties can be combined into a single property.

 

<!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>
        <div id="border-style">
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
        </div>
    </body>
</html>



Shading border for paragraph

 

<!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>
<div> 
    <p>Normal Paragraph</p> 
</body>
</html>



Use different border style to highlight

 

<!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>
    <p>Another paragraph, with <span class="large"><em>large italic</em></span> and <span class="small"><strong>small bold</strong></span> text, also in Verdana.</p>
</body>
</html>



Various border-styles

 
<?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>
      <div style = "border-style: solid">Solid border</div>
      <div style = "border-style: double">Double border</div>
      <div style = "border-style: groove">Groove border</div>
      <div style = "border-style: ridge">Ridge border</div>
      <div style = "border-style: inset">Inset border</div>
      <div style = "border-style: outset">Outset border</div>
   </body>
</html>



When no border-color is specified, the border color is the value of the color property.

 
<!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>
        <div id="color-default">
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
        </div>
    </body>
</html>
Источник — «http://wbex.ru/index.php?title=HTML/CSS/Box_Model/border_style&oldid=5243»