HTML/CSS/CSS Attributes and Javascript Style Properties/border style

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

Border style all values

 

<?xml version="1.0" encoding="iso-8859-1"?>
<!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>A CSS Example</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style rel="stylesheet" type="text/css">
body {
  font-family: arial, verdana, sans-serif;
}
p {
  border-color: #000000;
}
.none {
  border-style: none;
}
.solid {
  border-style: solid;
}
.dotted {
  border-style: dotted;
}
.dashed {
  border-style: dashed;
}
.double {
  border-style: double;
}
.groove {
  border-style: groove;
}
.ridge {
  border-style: ridge;
}
.inset {
  border-style: inset;
}
.outset {
  border-style: outset;
}
.hidden {
  border-style: hidden;
}
</style>
</head>
<body>
<p class="none">This paragraph has a border-style property set to none.</p>
<p class="solid">This paragraph has a border-style property set to solid.</p>
<p class="dotted">This paragraph has a border-style property set to dotted.</p>
<p class="dashed">This paragraph has a border-style property set to dashed.</p>
<p class="double">This paragraph has a border-style property set to double.</p>
<p class="groove">This paragraph has a border-style property set to groove.</p>
<p class="ridge">This paragraph has a border-style property set to ridge.</p>
<p class="inset">This paragraph has a border-style property set to inset.</p>
<p class="outset">This paragraph has a border-style property set to outset.</p>
<p class="hidden">This paragraph has a border-style property set to hidden.</p>
</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>
    <head>
      <title></title>
      <style type="text/css">
        div {
          padding: 10px;
          margin: 10px;
          border: thick black;
        }
      </style>
    </head>
    <body>
      <div style="border-style: dashed;">
          border-style: 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>
    <head>
      <title></title>
      <style type="text/css">
        div {
          padding: 10px;
          margin: 10px;
          border: thick black;
        }
      </style>
    </head>
    <body>
      <div style="border-style: dotted;">
          border-style: 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>
    <head>
      <title></title>
      <style type="text/css">
        div {
          padding: 10px;
          margin: 10px;
          border: thick black;
        }
      </style>
    </head>
    <body>
      <div style="border-style: double;">
          border-style: double;
      </div>
    </body>
  </html>



"border-style" Example

    
<html>
<head>
<style>
.style1 { 
    border:5px solid #cccccc; 
    border-style:dashed; 
    font-family:verdana; 
    font-weight:bold
}
.style2 { 
    border:"none"; 
    font-family:verdana; 
    font-weight:bold 
}
</style>
</head>
<body>
Move mouse in and out to see the style change.
<div id="myL" 
     style="width:230; 
            height:100; 
            background-color:beige"
     onmouseover="this.className="style1""
     onmouseout="this.className="style2"">This is a div element.
</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>
    <head>
      <title></title>
      <style type="text/css">
        div {
          padding: 10px;
          margin: 10px;
          border: thick black;
        }
      </style>
    </head>
    <body>
      <div style="border-style: groove;">
          border-style: 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>
    <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>
    </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>
    <head>
      <title></title>
      <style type="text/css">
        div {
          padding: 10px;
          margin: 10px;
          border: thick black;
        }
      </style>
    </head>
    <body>
      <div style="border-style: inset;">
          border-style: 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>
    <head>
      <title></title>
      <style type="text/css">
        div {
          padding: 10px;
          margin: 10px;
          border: thick black;
        }
      </style>
    </head>
    <body>
      <div style="border-style: none;">
          border-style: 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>
    <head>
      <title></title>
      <style type="text/css">
        div {
          padding: 10px;
          margin: 10px;
          border: thick black;
        }
      </style>
    </head>
    <body>
      <div style="border-style: outset;">
          border-style: 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>
    <head>
      <title></title>
      <style type="text/css">
        div {
          padding: 10px;
          margin: 10px;
          border: thick black;
        }
      </style>
    </head>
    <body>
      <div style="border-style: ridge;">
          border-style: ridge;
      </div>
    </body>
  </html>



border style shorthand with three values

 

<!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: thin medium thick;
            border-style: solid dashed dotted;
        }
            </style>
        </head>
        <body>
            <p>
                This is a test. This is a test. 
            </p>
        </body>
    </html>



border style shorthand with two values

 

<!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: thin thick;
            border-style: solid dotted;
        }
            </style>
        </head>
        <body>
            <p>
                This is a test. This is a test. 
            </p>
        </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>
    <head>
      <title></title>
      <style type="text/css">
        div {
          padding: 10px;
          margin: 10px;
          border: thick black;
        }
      </style>
    </head>
    <body>
      <div style="border-style: solid;">
          border-style: solid;
      </div>
    </body>
  </html>



border-style: solid dashed 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: thin medium thick;
            border-style: solid dashed dotted;
        }
            </style>
        </head>
        <body>
            <p>
                This is a test. This is a test. 
            </p>
        </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: thin medium 30px thick;
                    border-style: solid dashed double dotted;
                }
            </style>
        </head>
        <body>
      <p>
          This is a test. This is a test. 
      </p>
        </body>
    </html>



border-style: solid 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: thin thick;
            border-style: solid dotted;
        }
            </style>
        </head>
        <body>
            <p>
                This is a test. This is a test. 
            </p>
        </body>
    </html>



The border-style Property

 
Value       Description
none        No border. (Equivalent of border-width:0;)
solid       Border is a single solid line.
dotted      Border is a series of dots.
dashed      Border is a series of short lines.
double      Border is two solid lines; the value of the border-width property creates the sum of the two lines and the space between them.
groove      Border looks as though it is carved into the page.
ridge       Border looks the opposite of groove.
inset       Border makes the box look like it is embedded in the page.
outset      Border makes the box look like it is coming out of the canvas.
hidden      Same as none, except in terms of border-conflict resolution for table elements. (See section on tables.)
Источник — «http://wbex.ru/index.php?title=HTML/CSS/CSS_Attributes_and_Javascript_Style_Properties/border_style&oldid=4789»