border-image-013-ref.html (1445B)
1 <!DOCTYPE html> 2 3 <meta charset="utf-8"> 4 5 <title>CSS Reference Test</title> 6 7 <!-- 8 9 Author is Chris Nardi 10 11 --> 12 13 <style> 14 .borderContainer 15 { 16 height: 50px; 17 position: relative; 18 width: 50px; 19 } 20 21 .borderContainer > div 22 { 23 background-image: url("../support/green-dot.png"); 24 height: 10px; 25 position: absolute; 26 width: 10px; 27 } 28 29 .left 30 { 31 left: 0px; 32 } 33 34 .left1 35 { 36 left: 10px; 37 } 38 39 .left2 40 { 41 left: 20px; 42 } 43 44 .left3 45 { 46 left: 30px; 47 } 48 49 .right 50 { 51 right: 0px; 52 } 53 54 .top 55 { 56 top: 0px; 57 } 58 59 .top1 60 { 61 top: 10px; 62 } 63 64 .top2 65 { 66 top: 20px; 67 } 68 69 .top3 70 { 71 top: 30px; 72 } 73 74 .bottom 75 { 76 bottom: 0px; 77 } 78 </style> 79 80 <p>Pass if the square has borders made of green dots and <strong>no red</strong>. 81 82 <div class="borderContainer"> 83 <div class="top left"></div><div class="top left1"></div><div class="top left2"></div><div class="top left3"></div><div class="top right"></div> 84 <div class="left top1"></div><div class="right top1"></div> 85 <div class="left top2"></div><div class="right top2"></div> 86 <div class="left top3"></div><div class="right top3"></div> 87 <div class="bottom left"></div><div class="bottom left1"></div><div class="bottom left2"></div><div class="bottom left3"></div><div class="bottom right"></div> 88 </div>