two border radius

In this example below you will see how to do a two border radius with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by balu, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright balu ©
  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<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/balu/two-border-radius-ABbDK */
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;
}

Comments