two border radius

Tutorials of (Two border radius) by Balakrishna

<!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8">
  <title>two border radius</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>
  <div class = 'one'>
  <span>
    <img src = 'https://lh3.googleusercontent.com/-gE6TOQCei6A/AAAAAAAAAAI/AAAAAAAAAAA/uQrn7xtpFTk/s96-c/photo.jpg'/></span>
</div>
<div class = 'two'>
  <span>
    <img src = 'https://fbcdn-profile-a.akamaihd.net/hprofile-ak-ash4/c40.41.495.495/s160x160/374442_565639850120948_1759926993_n.jpg'/></span>
</div>
<div class = 'three'>
  <span>
    <img src = 'https://fbcdn-profile-a.akamaihd.net/hprofile-ak-snc6/c170.50.621.621/s160x160/264872_522333994451534_1332013118_n.jpg'/></span>
</div>
  
  
</body>
</html>
/* Downloaded from https://www.codeseek.co/ */
body{
  overflow-y : scroll;
}
div.one,div.two,div.three{
  width : 300px;
  height : 25px;

  border-radius : 50px;
  position : relative;
  display : inline-block;
}
div.one{
   top : 50px;
    background : -webkit-linear-gradient(90deg,#FF0000,#FF8080);
  background : -moz-linear-gradient(90deg,#FF0000,#FF8080);
   background : linear-gradient(0deg,#FF0000,#FF8080);
}
div.two{
  top : 100px;
  left : 50px;
  background : -webkit-linear-gradient(90deg,#0066FF,#4D94FF);
  background : -moz-linear-gradient(0deg,#0066FF,#4D94FF);
  background : linear-gradient(0deg,#0066FF,#4D94FF);
}
div.three{
  top : 30px;
  left : 100px;
  background : -webkit-linear-gradient(90deg,#fee600,#FEEE4D);
  background : linear-gradient(0deg,#fee600,#FEEE4D);
  background : -moz-linear-gradient(0deg,#fee600,#FEEE4D);
}
div.two img,div.three img{
  width : 96px;
  height : 96px;
}
div:before, div:after{
  content : '';
  width : 15px;
  height : 15px;
  position : absolute;
  background : white;
  border-radius : 50%;
  top : 5px;
}
div:before{
  left : 5px;
}
div:after{
  right : 5px;
}
div img{
  border-radius : 50%;
  border : 3px solid white;
  
  position : absolute;
}
div.one img{
  left : 150px;
  top : -10px;
}
div.two img{
  left : 50px;
  top : -50px;
}
div.three img{
  left : 100px;
  top : -10px;
}
span:before{
  content : "";
  border-radius : 50%;
  width : 102px;
  height : 102px;
  position : absolute;
   
}
div.one span:before{
  border : 3px solid red;
   left : 147px;
  top : -13px;
}
div.two span:before{
   border : 3px solid #0066FF;
   left : 47px;
  top : -53px;
}
div.three span:before{
   border : 3px solid #fee600;
   left : 97px;
  top : -13px;
}
/*MORPH*/
img,span {
  -webkit-transition: -webkit-transform 1s ease;
     -moz-transition: -moz-transform 1s ease;
       -o-transition: -o-transform 1s ease;
      -ms-transition: -ms-transform 1s ease;
          transition: transform 1s ease;
}
 
img:hover,span {
  -webkit-transform: rotate(360deg);
     -moz-transform: rotate(360deg);
       -o-transform: rotate(360deg);
      -ms-transform: rotate(360deg);
          transform: rotate(360deg);
  cursor :pointer;
}
/* Downloaded from https://www.codeseek.co/ */

This awesome code ( two border radius ) is write by balakrishna, you can se more from this user in the personal repository

You can find the original code on Codepen.io

2018 © balakrishna