Outline/Border

Some tests to see differences between CSS property border & outline

by Gerkin

HTML

<section>
<h3>
Wrapping multilined text
</h3>
<p>
This is a piece of text with <span class="border">some outlined content to see what happens if there is a wrap with outline and/or border. Please resize me if I do not wrap lines.</span>
</p>
<p>
This is a piece of text with <span class="outline">some outlined content to see what happens if there is a wrap with outline and/or border. Please resize me if I do not wrap lines.</span>
</p>
</section>

<section>
<h3>
Wrapping overflowing elements in inline parent
</h3>
  <div class="testInlines border">
    <inline class="leftInline">
    </inline>
    <inline class="rightInline">
    </inline>
  </div>
  <div class="testInlines outline">
    <inline class="leftInline">
    </inline>
    <inline class="rightInline">
    </inline>
  </div>
</section>

<section>
<h3>
Wrapping floated inline elements 
</h3>
  <div class="testFloats outline">
    <div class="leftFloat">
    </div>
    <div class="rightFloat">
    </div>
  </div>
  <div class="testFloats border">
    <div class="leftFloat">
    </div>
    <div class="rightFloat">
    </div>
  </div>
</section>

CSS

p{
  font-size:20px;
}


.testInlines{
  display: inline;
}
.testInlines > inline{
  display: inline-block;
  border: 1px solid black;
}
.leftInline {
  width: 50px;
  height:50px;
}
.rightInline{
  width: 50px;
  height: 100px;
}


.testFloats{
  display: inline;
}
.testFloats > div {
  float: left;
  border: 1px solid black;
}
.leftFloat {
  width: 50px;
  height:50px;
}
.rightFloat{
  width: 50px;
  height: 100px;
}


.border{
  border: 5px solid #F00;
}
.outline{
  outline: 5px solid #0F0;
}