JSFiddle - React, Tailwind, and code Playground

by Sergio Kagiema

HTML

<h1>Playing with borders</h1>

<details>
  I was searching on the web about more stuff 
  for the border-radius. 
  Lea Verou did a very good job on explaining stuff about it. 
  I intend to do things on them using the VueJs 
  Something cool. I dont know yet.
  <br>
  I found this guy: 
  <a href="http://www.mrgeek.me/technology/tutorials/web-design/css3-border-radius-property-explained/">
    css3-border-radius-property-explained
  </a>
</details>

<ul>
  <li class="item"></li>
  <li class="item"></li>
  <li class="item"></li>
  <li class="item"></li>
  <li class="item"></li>
</ul>

<h1>Playing with the border images</h1>

<div class="border-img-box"></div>

CSS

ul {
  list-style-type: none;
}
.item {
   display: inline-block;
   border: 8px double black;
   margin: 5px;
   width: 70px;
   height: 70px;
   //border-radius: 10px 40px;
   border-radius: 10px / 40px 80px; 
   // the upper is for making the horizontal and the vertical borders different
   
}

.border-img-box {
  width: 350px;
  height: 80px;
  border: 10px outset red;
  border-image: url(https://static3.depositphotos.com/1006994/256/v/950/depositphotos_2567156-stock-illustration-abstract-floral-border-background.jpg) round 30}