如何使制表符在顶部两个角处变圆？

Question

我目前有一个矩形的蓝色标签，单击该标签时会突出显示。 如何使该标签的左上角和右上角圆角？

这是我的小提琴： http : //jsfiddle.net/hus​​kydawgs/vm4d3a1q/27/

这是我的HTML：

    <ul class="nav-tabs">
    <li>
        <input checked="checked" id="tab-1" name="tabs" type="radio" /> <label for="tab-1">First</label>
        <div class="nav-tab-content">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum fuga porro placeat enim cumque nobis, eum atque suscipit optio quibusdam dolores recusandae! Ab fugiat deserunt explicabo expedita delectus labore illum.</p>
            <p>Harum facilis, dolore! Sed eligendi accusamus harum, earum error a praesentium! Esse laboriosam incidunt, suscipit possimus magnam nostrum voluptatem minima deserunt nisi, sint iste tenetur corporis itaque aspernatur neque explicabo.</p>
            <p>Nobis nihil dolores optio! Aperiam laudantium ipsam alias enim, omnis voluptatem laboriosam, repudiandae magni, quas, quos in repellendus delectus! Vel consequatur tempora aperiam earum temporibus nemo cupiditate laudantium laboriosam, eos.</p>
            <p>Quis eveniet delectus, earum rerum asperiores ducimus quos eaque ex tenetur corporis ullam hic quasi magni laborum necessitatibus impedit voluptates! Deleniti fuga aliquam ex. Reiciendis necessitatibus, obcaecati et labore aliquid.</p>
            <p>Fuga odit at nostrum molestias, inventore deserunt tempore quae cupiditate nulla voluptatem earum doloribus quia iste, eum dignissimos totam similique ea unde asperiores! Vero unde rem laboriosam repellat sunt. Vel.</p>
            <p>Qui nobis praesentium in. Natus quisquam in repudiandae laborum saepe excepturi veniam dicta vitae porro qui at obcaecati dolorum amet eligendi asperiores quia velit eum, aut libero itaque quidem numquam.</p>
            <p>Similique repellendus blanditiis ratione odio ducimus cupiditate laborum maiores a explicabo molestias voluptas tenetur, sed sit inventore officia mollitia iusto doloremque accusamus provident cum obcaecati dolores. Saepe enim natus perferendis.</p>
            <p>Aut perspiciatis eum explicabo odio aspernatur laboriosam impedit atque doloremque at, quo. Dolore fugiat et cupiditate accusamus consectetur illum error ut saepe, explicabo laudantium, perspiciatis ea similique libero, ullam molestiae?</p>
            <p>Impedit obcaecati sequi a maxime eos fuga accusantium, labore molestias voluptas dolor sapiente dolore error ipsa vero quisquam inventore vitae quam assumenda quibusdam unde at hic? Facere possimus itaque doloremque!</p>
            <p>Corrupti obcaecati recusandae, doloribus quasi. Laboriosam aspernatur sequi voluptatibus, consequuntur. Similique nam omnis at molestias porro consectetur quo saepe, dolorem repellat perspiciatis quibusdam architecto cupiditate provident error praesentium ex unde!</p>
        </div>
    </li>
    <li>
        <input id="tab-2" name="tabs" type="radio" /> <label for="tab-2">Second</label>
        <div class="nav-tab-content">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis, quae quas nemo veniam ullam magnam dolorum vero! Quod animi a, quidem nostrum, explicabo laboriosam distinctio ea sint recusandae, et voluptatibus.</p>
        </div>
    </li>
    <li>
        <input id="tab-3" name="tabs" type="radio" /> <label for="tab-3">Third</label>
        <div class="nav-tab-content">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa laborum dolore officiis assumenda nihil quas nam, molestiae est corrupti! Tenetur, recusandae enim hic itaque cupiditate nisi quidem inventore voluptatum neque.</p>
        </div>
    </li>
    <li>
        <input id="tab-4" name="tabs" type="radio" /> <label for="tab-4">Fourth</label>
        <div class="nav-tab-content">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa laborum dolore officiis assumenda nihil quas nam, molestiae est corrupti! Tenetur, recusandae enim hic itaque cupiditate nisi quidem inventore voluptatum neque.</p>
        </div>
    </li>    
</ul>

这是我的CSS：

.nav-tabs{
list-style-type: none;
padding: 0;
margin: 0;
position: relative;
text-align: center;
}

.nav-tabs:after{
    content: "";
    clear: both;
    display: block;
    height: 242px;
}

.nav-tabs li{
display: inline-block;
}

.nav-tabs li > input{
    display: none;
}

.nav-tabs li > label{
    display: inline-block;
    border: none;
    border-right-width: 0;
    border-bottom-width: 0;
    height: 30px;
    line-height: 30px;
    padding: 5px 20px;
    cursor: pointer;
}

.nav-tabs li:last-child > label{
    border-right-width: 1px;
}

.nav-tabs .nav-tab-content{
    display: none;
    position: absolute;
    left: 0;
    padding: 20px;
    border-top: 1px solid #e2e3e4;
    height: 200px;
    text-align: left;
}

/* Functional */

.nav-tabs li > input:checked + label{
    background-color: #2251a4;
    color: #fff;
}

.nav-tabs li > input:checked ~ .nav-tab-content{
    display: block;
}

Answer 1

加

border-radius: 6px 6px 0 0;

到.nav-tabs li > label 。

Answer 2

尝试设置边界半径。

border-top-right-radius 15px;
border-top-left-radius: 15px;

我更改了您在此处发布的示例

Answer 3

.nav-tabs li > input:checked + label {background-color: #2251a4;color: #fff; border-radius: 5px 5px 0px 0px;}