splosch

<div class="fancy-border-outer">
	<p class="fancy-border-inner">text with colorful gradient frame</p>
</div>
 
<div class="fancy-border-outer">
	<p class="fancy-border-inner">text with colorful <br> gradient frame <br> Testbla</p>
</div>

splosch

CSS riddle

I tried to find a way to explain more complicated CSS rulesets with a CSS riddle.

A Pen by Mario Winkler on CodePen.

License.

splosch

<div class="rating">
  <input type="radio" name="rating"><label>Really Bad</label> 
  <input type="radio" name="rating"><label>Bad</label> 
  <input type="radio" name="rating"><label>Ok</label> 
  <input type="radio" checked name="rating"><label>Good</label> 
  <input type="radio" name="rating"><label>Really Good</label> 
</div>