Bootstrap 違うデザインのボタンを両立させたい

Question

###実現したいこと
Bootstrap4のclass="btn"でボタンを設定しています。

四隅を丸くしたものと、二つの角だけを丸くしたボタンを両立させたいです。
ただし、両方ともbtnクラスを使っているため、CSSでデザインを変更すると両方に反映されてしまいます。
解決方法についてアドバイスいただけますと幸いです。

###試したこと
片方のクラスををbtn1と、別のクラス名に変更しましたが、Bootstrapのデフォルトデザインが適用されなくなってしまいました。

###各種コード
ボタン1（こちらのボタンの右側2箇所だけを丸くさせる）

<form class="form-inline my-2 my-lg-0" action="{% url 'search' %}" method="get">
    <input class="form-control-search mr-sm-0" name="keyword" type="search" placeholder="キーワード検索" aria-label="Search">
    <button class="btn btn-secondary my-2 my-sm-0" type="submit">
        <i class="fas fa-search"></i>
    </button>
</form>

ボタン2（こちらのボタンはBootstrapのデフォルトで四隅全てが丸くなるようにする）

<div class="card card-auth my-5 mx-auto">
    <div class="card-body">
        <p class="card-title text-center">ログアウトしますか？</p>
        <form method="post" class="form-auth">
            {% csrf_token %}
            <div class="button mx-auto">
                <button class="btn btn-lg btn-warning btn-block mx-auto" type="submit">ログアウト</button>
            </div>
        </form>
    </div>
</div>

CSS（現状全てのボタンの左側の丸みが取れてしまっています。）

.btn {
    font-size: 100%;
    border-radius: 0 10px 10px 0;
}

コードに不足等、わかりづらいところがあればご指摘いただけますと幸いです。

Answer 1

別名クラスを作ったうえで角取りたいボタンだけbtnと併用すれば良いのでは。

.btn-nd {
    border-radius: 0 10px 10px 0;
}

class="btn btn-nd   "

Comments

[minari766]

ご回答有り難うございます。
btnクラスの他に別クラスを作って、そこで詳細設定すれば良かったんですね。

[m.ts10806]

はい。同じ指定があれば基本的に後勝ちなので、「そこだけ違う別のクラス」を作って併用することはよくあります。
CSSフレームワークはそのような実装も意図して!importantがほとんど使われてないと思います。
試されたように同名クラスの一部機能上書きとかもよくありますよ。