RocSchool|TryEditor(代码在线运行工具)

<!DOCTYPE html>    
<html>    
    
<head>    
    <title>   
        button background Color   
    </title>   
        
    <style>   
    body{  
       text-align: center;  
    }  
        button {  
           color:lightgoldenrodyellow;  
            font-size: 30px;   
        }   
        .b1 {   
            background-color: red;   
            border:none;  
        }   
        .b2 {   
            background-color: blue;   
            border:5px brown solid;  
            border-radius: 7px;  
        }   
        .b3 {   
            background-color: yellow;   
            color:black;  
            border:5px red groove;  
            border-radius: 10px;  
        }   
        .b4{  
           background-color:orange;  
           border: 5px red dashed;  
           border-radius: 20px;  
        }  
        .b5{  
           background-color: gray;  
           border: 5px black dotted;  
           border-radius: 30px;  
        }  
        .b6{  
           background-color: lightblue;  
           border:5px blue double;       
           border-radius: 25px;  
        }  
    </style>   
</head>   
    
<body>    
   <h1>The border-radius property</h1>  
   <h2>Below there is the border name and border-radius</h2>  
    <button class="b1">none</button>   
    <button class="b2">solid 7px</button>   
    <button class="b3">groove 10px</button>   
    <button class="b4">dashed 20px</button>   
    <button class="b5">dotted 30px</button>  
    <button class="b6">double 25px</button>   
  
</body>    
</html>