유틸 - 보더 border

jb kim·2022년 8월 4일
0

부트스트랩

목록 보기
5/48

    <style>
        div {
            min-height: 150px;
            min-width: 150px;
            margin: 20px;
            display: inline-block;
        }
        body {
            margin-bottom: 500px;
        }
    </style>

https://getbootstrap.kr/docs/5.1/utilities/borders/

    <!-- ADDING BORDERS -->

    <div class="border"></div>
    <div class="border-top"></div>
    <div class="border-bottom"></div>
    <div class="border-start"></div>
    <div class="border-end"></div>
    <div class="border-end border-start border-top"></div>

    <br>
    <!-- REMOVING BORDERS -->

    <div class="border border-top-0"></div>
    <div class="border border-bottom-0"></div>
    <div class="border border-start-0"></div>
    <div class="border border-end-0"></div>

    <br>
    <!-- BORDER WIDTH -->

    <div class="border border-1"></div>
    <div class="border border-2"></div>
    <div class="border border-3"></div>
    <div class="border border-4"></div>
    <div class="border border-5"></div>

    <br>
    <!-- BORDER COLORS -->

    <div class="border border-5 border-primary"></div>
    <div class="border border-5 border-secondary"></div>
    <div class="border border-5 border-success"></div>
    <div class="border border-5 border-danger"></div>
    <div class="border border-5 border-warning"></div>
    <div class="border border-5 border-info"></div>
    <div class="border border-5 border-light"></div>
    <div class="border border-5 border-dark"></div>
    <div class="border border-5 border-white"></div>

    <br>
    <!-- BORDER RADIUS -->

    <div class="border rounded"></div>
    <div class="border rounded-top"></div>
    <div class="border rounded-bottom"></div>
    <div class="border rounded-start"></div>
    <div class="border rounded-end"></div>

    <div class="border rounded-circle"></div>
    <div style="width: 400px;" class="border rounded-pill"></div>

    <!-- ROUNDED SIZES -->

    <div class="border rounded-1"></div>
    <div class="border rounded-2"></div>
    <div class="border rounded-3"></div>
    <div class="border rounded-0"></div>

profile
픽서

0개의 댓글