css - bootstrap btn-group buttons not joined -

i'm using bootstrap version 3.3.7 , have code w3schools website (bootstrap website not available in country):

    <div class="btn-group btn-group-lg">         <button type="button" class="btn btn-primary">apple</button>         <button type="button" class="btn btn-primary">samsung</button>         <button type="button" class="btn btn-primary">sony</button>     </div> 

the buttons not joined together:

i have tried adding role="group", , without btn-group-lg, inside form , inside containers bare on page. in chrome developer tools can see btn-group being applied , nothing being overridden (i expect border-radius be) , have redownloaded boostrap css files in case accidentally corrupted them:

what else can @ see why not joined?

i have similar on input groups cant find example @ point.

edit

based on 1 of answers, removed of application styling , linked bootstrap cdn, still didn't work, seen fiddles , snippets work, i'm still @ loss why doesn't work here. based on same answer, added application css:

.btn-group button.btn {     border-radius:0px; } .btn-group button.btn:first-child {     border-radius:6px 0 0 6px; }  .btn-group button.btn:last-child {     border-radius:0 6px 6px 0; } 

and appear expected, i'd still ot bottom of what's going on if possible :(

try add style, check if btn in btn group not first or last child, turn border-radius 0:

.btn-group>.btn:not(:first-child):not(:last-child):not(.dropdown-toggle) {     border-radius: 0 !important; } 

works fine me? have css using !important overwrite bootstrap style?

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>        <div class="btn-group">    <button type="button" class="btn btn-primary">apple</button>    <button type="button" class="btn btn-primary">samsung</button>    <button type="button" class="btn btn-primary">sony</button>  </div>

another option can create own btn, check following:

the important part

.btngrp li:first-child {   border-radius: 6px 6px 0 0;   border-top-width: 2px; } .btngrp li:last-child {   border-radius: 0 0 6px 6px; } 

this create btn group effect force first btn in group have border-radius @ left side , last btn in group have border-radius @ right side, btn in between not have border-radius attr.

*, *:before, *:after {    box-sizing: border-box;  }    body {    text-align: center;    padding: 2em;    font-family: raleway, sans-serif;  }    .btngrp {    list-style-type: none;    margin: 2em auto;    padding: 0;    font-size: .85em;    display: table;    letterspacing: .2em;  }  @media (min-width: 768px) {    .btngrp {      font-size: 1em;    }  }  .btngrp li {    vertical-align: middle;    background: #337ab7;    padding: .75em 1.5em;    line-height: 0.5;    border: 2px solid #2e6da4;    border-top-width: 0;    -webkit-transition: 200ms;    transition: 200ms;  }  .btngrp li:first-child {    border-radius: 6px 6px 0 0;    border-top-width: 2px;  }  .btngrp li:last-child {    border-radius: 0 0 6px 6px;  }  @media (min-width: 480px) {    .btngrp li {      display: table-cell;      border-top-width: 2px;      border-left-width: 0;    }    .btngrp li:first-child {      border-radius: 6px 0 0 6px;      border-left-width: 2px;    }    .btngrp li:last-child {      border-radius: 0 6px 6px 0;    }  }  .btngrp li:hover {    background: #286090;   border: 2px solid ##204d74;  }  .btngrp {    display: block;    text-align: center;    padding: 0 .5em;    text-decoration: none;  }  @media (min-width: 768px) {    .btngrp {      padding: .5em .5em;    }  }  .btngrp a:link, .btngrp a:visited {    color: white;  }

<ul class="btngrp">    <li><a href="#">apple</a></li>    <li><a href="#">samsung</a></li>    <li><a href="#">sony</a></li>  </ul>