DaunKoder
CSS

Belajar CSS: Mengatur Border (Garis Tepi)

Garis tepi dapat kita gunakan untuk memperindah web kita atau membedakan satau komponen dengan komponen lainya.

Mengatur Warna

Untuk mengatur warna border kita bisa menggunakan properti border-color. Contoh:

<style>
    .box {
        background-color: cyan;
        width: 250px;
        height: 250px;
        border-color: red;
        border-style: solid;
    }
</style>

<div class="box"></div>

Warna

Kalian harus mengatur style juga agar border tampil.

Untuk mengatur warna border setiap sisi gunakan properti border-*-color. * diganti dengan left, right, top atau bottom. Contoh:

Contoh:

<style>
    .box {
        background-color: cyan;
        width: 250px;
        height: 250px;
        border-style: solid;
        border-left-color: red;
        border-right-color: black;
        border-top-color: violet;
        border-bottom-color: green;
    }
</style>

<div class="box"></div>

Warna Setiap Sisi

Mengatur Style (Gaya)

Untuk mengatur style kita dapta menggunakan properti border-style. Properti tersebut dapat diisi dengan

  • none/hidden, border tidak tampil
  • solid, border dipenuhi warna
  • double, dua border
  • dashed, border garis-garis kecil
  • dotted, border titik-titik

Contoh:

<style>
    .box {
        background-color: cyan;
        width: 250px;
        height: 250px;
        border-color: red;
        border-style: solid;
        display: inline-block;
        text-align: center;
        font-size: 36pt;
    }

    .box-dashed {
        border-style: dashed;
    }

    .box-dotted {
        border-style: dotted;
    }

    .box-double {
        border-style: double;
    }

    .box-none {
        border-style: none;
    }
</style>

<div class="box">solid</div>
<div class="box box-double">dotted</div>
<div class="box box-dashed">dashed</div>
<div class="box box-dotted">dotted</div>
<div class="box box-none">none</div>

Style

Untuk mengatur style border setiap sisi gunakan properti border-*-style. * diganti dengan left, right, top atau bottom. Contoh:

<style>
    .box {
        background-color: cyan;
        width: 250px;
        height: 250px;
        border-color: red;
        border-left-style: solid;
        border-right-style: dotted;
        border-top-style: dashed;
        border-bottom-style: double;
    }

</style>

<div class="box"></div>

Style Setiap Sisi

Mengatur Ukuran/Ketebalan

Untuk mengatur ketebalan border kita dapat menggunakan properti border-width dan diisi dengan Unit CSS. Contoh:

<style>
    .box {
        background-color: cyan;
        width: 250px;
        height: 250px;
        border-color: red;
        border-style: solid;
        border-width: 50px;
    }
</style>

<div class="box"></div>

Ukuran

Untuk mengatur ketebalan border setiap sisi gunakan properti border-*-width. * diganti dengan left, right, top atau bottom. Contoh:

<style>
    .box {
        background-color: cyan;
        width: 250px;
        height: 250px;
        border-color: red;
        border-style: solid;
        border-left-width: 50px;
        border-right-width: 10px;
        border-top-width: 10px;
        border-bottom-width: 50px;
    }
</style>

<div class="box"></div>

Ukuran Setiap Sisi

Mengatur Radius/Kelengkungan

Untuk mengatur kelengkungan border kita dapat menggunakan properti border-radius dan diisi dengan Unit CSS. Agar elemen membentuk bundar, kita dapat mengisinya dengan 100%. Contoh:

<style>
    .box {
        background-color: cyan;
        width: 250px;
        height: 250px;
        border-color: red;
        border-style: solid;
        border-radius: 50px;
        display: inline-block;
    }

    .bundar {
        border-radius: 100%;
    }
</style>

<div class="box"></div>
<div class="box bundar"></div>

Kelengkungan

Untuk mengatur kelengkungan tiap tepi gunakan properti gunakan properti border-*-radius. * diganti dengan top-left, top-right, bottom-left, dan bottom-right. Contoh:

<style>
    .box {
        background-color: cyan;
        width: 250px;
        height: 250px;
        border-color: red;
        border-style: solid;
        border-top-left-radius: 60px;
        border-top-right-radius: 50%;
        border-bottom-left-radius: 50%;
        border-bottom-right-radius: 60px;
    }
</style>

<div class="box"></div>

Radius setiap sisi

Shorthand Radius

Untuk mempermudah penulisan, kalian dapat menggunakan shorthand. Shorthand untuk border adalah properti border. Properti border diisi dengan format <ukuran> <style> <warna>. Style harus diisi sedangkan lainya opsional. Contoh:

<style>
    .box {
        background-color: cyan;
        width: 250px;
        height: 250px;
        border: 20px solid red;
    }
</style>

<div class="box"></div>

Border

Kalian juga dapat mengaturnya setiap sisi dengan border-*. * diganti dengan left, right, top atau bottom. Contoh:

<style>
    .box {
        background-color: cyan;
        width: 250px;
        height: 250px;
        border-left: 20px solid red;
        border-right: 20px dotted black;
        border-top: 20px solid red;
        border-bottom: 20px dotted black;
    }
</style>

<div class="box"></div>

Border setiap sisi

Kesimpulan

Selanjutnya saya akan menulis Penjelasan tentang CSS: Box Model. Terimakasih.