border-radius demo

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

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
Copyright HSIEH-RyIN ©
  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

  <meta charset="UTF-8">
  <title>border-radius demo</title>
    <link rel="stylesheet" href="">

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



  <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>



/*Downloaded from */
/*已預先載入 Reset CSS */
  width: 100px;
  height: 50px;
  margin: 50px;
  background: orange;
  border-radius: 15px;

  border-radius: 50%;
  border-radius: 10% 20% 30% 40%;
  /*分別是 「左上」、「右上」、「右下」、「左下」*/
  border-radius: 50% 0%;
  /*分別是 「左上右下」、「右上左下」*/
  border-radius: 50% 0% 20%;
  /*分別是 「左上」、「右上左下」、「右下」*/

  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;