Fix for uniform button border-radius - html

Question

http://codepen.io/mochiii/full/NGMXpe/ i have this project my problem is that the border- radius of the buttons are not uniform how do i fix that. I already tried specifying order radius for individual buttons but does not work.
#import url(https://fonts.googleapis.com/css?family=Audiowide);
#import url(https://fonts.googleapis.com/css?family=Righteous);
body{
background-color: #000000;
color: #ffffff;
}
.header{
font-family: 'Righteous', cursive;
}
h1{
border: 3px solid #ffffff;
border-radius: 20px;
width: 50%;
padding: 10px;
}
.countdown-block{
margin-top: 30px;
margin-bottom: 40px;
}
#clock{
border: 50px solid #FF1919;
border-radius: 60px;
padding: 20px;
width: 370px;
margin: 0px auto;
}
#clock>#countdown{
font-size: 60px;
font-family: 'Audiowide', cursive;
}
.breakHeader, .timeHeader{
font-family: 'Righteous', cursive;
}
#break, #time{
font-size: 40px;
font-family: 'Audiowide', cursive;
}
.btn{
font-size: 25px;
font-family: 'Righteous', cursive;
transition: all .3s;
position: absolute;
}
.btn:hover{
font-size: 35px;
}
.btn-group{
position: relative;
height: 35px;
display: block;
}
.btn-group > .btn{
float: none;
}
footer{
margin-top: 80px;
border-top: 2px dashed #ffffff;
}
i wonder what should i do thanks!

Answer 1

The problem is that you use Bootstrap and if you use .btn-group Bootstrap has predefined styles for that (you can see it HERE).
You can either override Bootstrap styles or create your own custom class and apply border-radius to it.
First solution:
CSS:
.btn-group>.btn:first-child:not(:last-child):not(.dropdown-toggle) {
border-radius: 10px;
}
.btn-group>.btn:not(:first-child):not(:last-child):not(.dropdown-toggle) {
border-radius: 10px;
}
.btn-group>.btn:last-child:not(:first-child), .btn-group>.dropdown-toggle:not(:first-child) {
border-radius: 10px;
}
CODEPEN
Second solution:
HTML:
Add your-border-radius class to every button
<button class="btn btn-success your-border-radius" id="countdownStart">Start</button>
CSS:
.your-border-radius {
border-radius: 10px !important;
}
You have to use !important rule to override Bootstrap styles.
CODEPEN

Answer 2

The issue is with you implementation of bootstrap.min. There is a Button Group that removed border radius. What you can do is overwrite these classes by changing the order of the css class implementation. Then over write the classes for whatever you want.
.btn-group>.btn:first-child:not(:last-child):not(.dropdown-toggle) {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}