border-radius demo

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

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

<head>
  <meta charset="UTF-8">
  <title>border-radius demo</title>
  
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">

  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <button class="btn">一般按鈕</button>
<button class="btn radius">圓角按鈕</button>

<div class="box circle">circle</div>
<div class="box demo1">demo1</div>
<div class="box demo2">demo2</div>
<div class="box demo3">demo3</div>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/HSIEH-RyIN/border-radius-demo-wpjRLE */
/*已預先載入 Reset CSS */
.btn{
  width: 100px;
  height: 50px;
  margin: 50px;
  background: orange;
}
.radius{
  border-radius: 15px;
}

.circle{
  border-radius: 50%;
}
.demo1{
  border-radius: 10% 20% 30% 40%;
  /*分別是 「左上」、「右上」、「右下」、「左下」*/
}
.demo2{
  border-radius: 50% 0%;
  /*分別是 「左上右下」、「右上左下」*/
}
.demo3{
  border-radius: 50% 0% 20%;
  /*分別是 「左上」、「右上左下」、「右下」*/
}

.box{
  width: 100px;
  height: 100px;
  background: blue;
  border: 5px solid orange;
  margin: 30px;
  float: left;
  color: #fff;
  line-height: 100px;
  font-size: 20px;
  text-align: center;
}

Comments