<header>
  <head>
    <title>
      CSS Study
      <hr>
    </title>
    <h1>CSS Study</h1>
  </head>
  <header>
    <body id="borderimg2">
      <div class="image" id="actual_face"><img src=https://3.img-dpreview.com/files/w/TS560x560?url=http%3A%2F%2Fpeople.kzoo.edu%2Fk11kg03%2FCS107Web%2ForiginalLeopard.jpg&signature=FWpoM2pgysxmWK1Sgs3ZCDMkbCQ%3D class="image" alt="testing" style="width=640px;height=480px">
      </div>
      
       <div class="image mix"><img src=https://3.img-dpreview.com/files/w/TS560x560?url=http%3A%2F%2Fpeople.kzoo.edu%2Fk11kg03%2FCS107Web%2ForiginalLeopard.jpg&signature=FWpoM2pgysxmWK1Sgs3ZCDMkbCQ%3D class="image" alt="testing" style="width=640px;height=480px">
      </div>
      
      <hr>
      <hr>
      <h2>The border-width Property</h2>
<p class="blued">This property specifies the width of the four borders:</p>
<div class="divved">
<p class="one dotted">Some text.</p>
<p class="two dashed">Some text.</p>
<p class="three solid">Some text.</p>
<p class="four double">Some text.</p>
<p class="five groove">Some text.</p>
<p class="six ridge">Some text.</p>
<p class="seven inset">Some text.</p>
      <p class="roarkEight outset">Self-made exercises in CSS</p>
      <p class="roarkNine none">Self-made exercises in CSS</p>
      <p class="roarkTen hidden">Self-made exercises in CSS</p>
      <p class="roarkEleven mix">Self-made 'wacky' exercises in CSS</p>
      </div>

<p><b>Note:</b> The "border-width" property does not work if it is used alone. 
Always specify the "border-style" property to set the borders first.</p>
      
      <h1>The border-image Property</h1>
<p>The border-image property specifies an image to be used as the border around an element:</p>

<p id="borderimg1">Here, the image tiles to fill the area. The image is rescaled if necessary, to avoid dividing tiles.</p>
<p id="borderimg2">Here, the image is stretched to fill the area.</p>

<p>Here is the original image:</p>
<img src="https://www.w3schools.com/cssref/border.png">

<p><strong>Note:</strong> Internet Explorer 10, and earlier versions, do not support the border-image property.</p>

      <p><strong><bold>AND I MEAN WHACKY!</bold></strong>
.image{
  height:4in;
  width:6in;
  border:8px solid #66a3ff;
 display: block;
  margin-left: auto;
  margin-right: auto;
}

.actual_face{
  
}

p.dotted {border-style: dotted;}
p.dashed {border-style: dashed;}
p.solid {border-style: solid;}
p.double {border-style: double;}
p.groove {border-style: groove;}
p.ridge {border-style: ridge;}
p.inset {border-style: inset;}
p.outset {border-style: outset;}
p.none {border-style: none;}
p.hidden {border-style: hidden;}
p.mix {border-style: dotted dashed solid double;}

#borderimg1 { 
  border: 10px solid transparent;
  padding: 15px;
  border-image: url(https://www.w3schools.com/cssref/border.png) 30 round;
}

#borderimg2 { 
  border: 10px solid transparent;
  padding: 15px;
  border-image: url(https://www.w3schools.com/cssref/border.png) 30 stretch;
}

body {
  background-image: url(https://www.w3schools.com/cssref/border.png), url("https://i.pinimg.com/236x/d0/38/19/d038192e3d8a90f93805b8e64c1b75b9.jpg");
  background-repeat: repeat;
}

h2{background-color: #66a3ff;}

h1{background-color: #66a3ff;}

title{background-color: blue;}

p{background-color:white;}

blued{background-color:#66a3ff }

divved{background-color:"cc7a00"}


/*Absolute units include:

cm (centimeters)
mm (millimeters)
in (inches)
pc (picas)
pt (points)
px (pixels)
Note that the editor’s draft of the spec also includes the quarter-millimeter (q) unit, but this is new and doesn’t seem to have any browser support.

Applied physicists.  Sheesh.

https://stackoverflow.com/questions/16570013/css3-nth-child-tiles-background-color-alternate-based-on-number-of-columns*/

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.