HTML/CSS/Box Model/border style

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

All border styles

   <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">
       div {
         padding: 10px;
         margin: 10px;
         border: thick black;
       }
     </style>
   </head>
   <body>
         border-style: hidden;
         border-style: dotted;
         border-style: dashed;
         border-style: solid;
         border-style: double;
         border-style: groove;
         border-style: ridge;
         border-style: inset;
         border-style: outset;
         border-style: none;
   </body>
 </html>
</source>
   
  


border-style: dashed

   <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-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>
dashed
   </body>

</html>

</source>
   
  


border-style: dotted

   <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-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>
dotted
   </body>

</html>

</source>
   
  


border-style: double

   <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-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>
double
   </body>

</html>

</source>
   
  


border-style: groove

   <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-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>
groove
   </body>

</html>

</source>
   
  


border-style: hidden;

   <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-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>
hidden
   </body>

</html>

</source>
   
  


border-style: inset

   <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-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>
       
inset
   </body>

</html>

</source>
   
  


border-style: none

   <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-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>
       
none
   </body>

</html>

</source>
   
  


border-style: outset

   <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-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>
       
outset
   </body>

</html>

</source>
   
  


border-style: ridge

   <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-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>
ridge
   </body>

</html>

</source>
   
  


Border styles, color and size

   <source lang="html4strict">

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

Dotted

Dashed

Solid

Double

Groove

Ridge

Inset

Outset


</body> </html>

</source>
   
  


border-style: solid

   <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-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>
solid
   </body>

</html>

</source>
   
  


border-style: solid dashed double dotted

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


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

   <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-style {

   border-style: solid dashed double inset;

}

       </style>
   </head>
   <body>
           Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
   </body>

</html>

</source>
   
  


Shading border for paragraph

   <source lang="html4strict">

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

Normal Paragraph

</body> </html>

</source>
   
  


Use different border style to highlight

   <source lang="html4strict">

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

Another paragraph, with large italic and small bold text, also in Verdana.

</body> </html>

</source>
   
  


Various border-styles

   <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">
        body    { background-color: #ccffcc }
        div     { text-align: center;
                  margin-bottom: .3em;
                  width: 50%;
                  position: relative; 
                  left: 25%;
                  padding: .3em }
     </style>
  </head>
  <body>
Solid border
Double border
Groove border
Ridge border
Inset border
Outset border
  </body>

</html>

</source>
   
  


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

   <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#color-default {

   color: crimson;
   border-style: solid dotted;

}

       </style>
   </head>
   <body>
           Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
   </body>

</html>

</source>