There is an issue with whitespace appearing around elements that have a border-radius larger than 0, but this only occurs in Internet Explorer.
If using border-top-left-radius: 20px; and border-top-right-radius: 20px;:
https://i.sstatic.net/MAKsx.png
*When not using border-radius:
https://i.sstatic.net/3PtGu.png
The Code:
.price-head {
color: #fff;
margin: 0;
height: 109px;
}
.btop {
background: #8ebded;
}
.bbot {
background-color: #4096ee;
height: 80px;
position:relative;
}
.bbot:after {
content:'';
position: absolute;
top: 100%;
left: 63%;
margin-left: -50px;
width: 0;
height: 0;
border-top: solid 20px #4096ee;
border-left: solid 20px transparent;
border-right: solid 20px transparent;
z-index: 10;
}<head>
<link href="css/normalize.css" rel="stylesheet">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
</head>
<body>
<div class="row" style="margin: 0;">
<div class="row text-center" style="margin: 0;">
<div class="col-md-2" style="margin: 0;"></div>
<div class="col-md-10" style="margin: 0; padding: 0;">
<div class="col-md-3 price-head btop" style="border-top-left-radius: 20px;">
<h1 style="padding-top: 15px;"><strong>Sole Trader</strong></h1>
</div>
<div class="col-md-3 price-head btop">
<h1><strong>Small Business</strong></h1>
</div>
<div class="col-md-3 price-head btop">
<h1 style="padding-top: 15px;"><strong>SME</strong></h1>
</div>
<div class="col-md-3 price-head btop" style="border-top-right-radius: 20px;">
<h1 style="padding-top: 15px;"><strong>Contractor</strong></h1>
</div>
</div>
</div>
<div class="row text-center" style="margin: 0;">
<div class="col-md-2" style="margin: 0;">
<h3>Choose Plan</h3>
</div>
<div class="col-md-10" style="margin: 0; padding: 0;">
<div class="col-md-3 price-head bbot">
<h1>£</h1>
</div>
<div class="col-md-3 price-head bbot">
<h1>££</h1>
</div>
<div class="col-md-3 price-head bbot">
<h1>£££</h1>
</div>
<div class="col-md-3 price-head bbot">
<h1>££££</h1>
</div>
</div>
</div>
</div>
</body>Thank you for your help!