Basic essay about border-radius

<!DOCTYPE html>
<html lang=en>
<head>
<title></title>
<meta charset=utf-8>
<meta name="viewport" content="width=device-width">
<style>

#txt3{
width:600px;
font-size:25px;
padding:10px 20px;
color:maroon;
border:10px solid red;
outline:none;
border-top:0;
}
#txt2{
width:600px;
font-size:25px;
padding:10px 20px;
color:maroon;
border:10px solid red;
outline:none;
border-bottom:10px solid transparent;
border-top:10px solid transparent;
border-radius:50px;
}
#txt1{
width:600px;
font-size:25px;
padding:10px 20px;
color:maroon;
border:10px solid red;
outline:none;
border-width:0 10px 0 10px;
border-radius:50px;
}
input{
width:600px;
margin:50px;
display:block;
}
#txt{
width:600px;
font-size:25px;
padding:10px 0;
color:red;
border:5px solid green;
outline:none;
text-align:center;
border-radius:50px;
}

// border-radius:50px;  same as border-radius:50px 50px 50px 50px;
// 4 parameters: top left, top right, bottom right, bottom left ( clockwise )

</style>
</head>
<body>

<input id='txt' type='text' placeholder='Pls move slider'/>
<input id='range' oninput='change()' type='range' value='0'/>

<input id='txt1' type='text' placeholder='Pls move slider'/>
<input id='range1' oninput='display()' type='range' value='0'/>

<input id='txt2' type='text' placeholder='Type...'/>

<input id='txt3' type='text' placeholder='Type...'/>


<script>

function change(){
txt.value=range.value;
txt.style.width=range.value*6+'px';
}
function display(){
txt1.value=range1.value;
if(range1.value > 50){
txt1.style.textAlign='center';
txt1.style.color='blue';
}else{
txt1.style.textAlign='left';
txt1.style.color='red';
}

}

</script>
</body>
</html>