outline

by Reusablecode

HTML

<--
<div class='box alpha'></div>
<div class='box beta'></div>
<div class='box gamma'></div>
-->
<br />
 
<span class="the_score">8</span>
<img class="ten" 
src="http://web.appstorm.net/wp-content/themes/appstorm_v2/images/ten.gif" alt="">

<div class="ratingblock">
    <span class="rating">8</span>
    <span class="max">10</span>
</div>

CSS

.box {
  margin: 20px;
  width: 100px;
  height: 100px;
  outline: 2px dashed blue;
  border: 2px solid red;
  background: hsla( 0, 100%, 50%, 0.1 );
  border-radius: 20px;
  float: left;
}

.box.beta {
  outline-offset: 10px;
}

.box.gamma {
  outline-offset: -10px;
}