如何設計這樣的按鈕？

Question

如何風格的按鈕這樣的，我用邊界[下，左，右]按鈕周圍，但它不工作

button { border-bottom: 1px solid red; border-left: 1px solid red; border-right: 1px solid red;}

Answer 1

div{ 
 
width:140px; 
 
height:40px; 
 
background-color:#FCF4F1; 
 
display:flex; 
 
} 
 

 
button{ 
 
width:100px; 
 
height:30px; 
 
background-color:#FCF4F1; 
 
border:none; 
 
border-bottom:2px solid #FF0000; 
 
border-radius: 20px; 
 
color:#FF0000; 
 
font-size:20px; 
 
margin:auto; 
 
} 
 
button i.fa{ 
 
font-size:20px; 
 
padding-left:20px; 
 
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> 
 
<div><button type="button" ><span>test</span><i class="fa fa-arrow-circle-o-right"></i></button></div>

Answer 2

是這樣的嗎？ https://jsfiddle.net/Lsw8ybL7/

button { 
    background: transparent; 
    border: none; 
    color: red; 
    padding: .5em 1em; 
    border-bottom: 2px solid red; 
    border-radius: 1em; 
} 

上的按鈕，只有在底部會做的伎倆有邊框邊框半徑。