Skip to main content

B.4.2.2. Border Radius

Temen-temen pernah lihat elemen yang punya sudut-sudut membulat? Nah, efek itu bisa dibuat dengan mudah menggunakan properti border-radius di CSS. Properti ini memungkinkan temen-temen untuk mengatur seberapa bulat sudut-sudut elemen HTML, memberikan tampilan yang lebih halus dan modern.

Sintaks penggunaan border-radius cukup sederhana:

selector {
  border-radius: value;
}

Nilai dari border-radius dapat berupa satuan panjang seperti piksel (px), persentase (%), atau bahkan beberapa nilai untuk mengatur sudut-sudut secara spesifik.

Untuk lebih jelasnya, coba temen-temen perhatikan beberapa contoh penggunaannya:

  • Membulatkan Semua Sudut

    div {
      width: 100px;
      height: 100px;
      border-radius: 16px;
      background-color: blueviolet;
    }

    Dengan kode di atas, semua sudut dari elemen <div> akan dibulatkan dengan jari-jari sebesar 16 piksel.

  • Membuat Lingkaran

    Jika temen-temen ingin membuat elemen berbentuk lingkaran sempurna, cukup atur border-radius menjadi 50% dan pastikan elemen tersebut memiliki lebar dan tinggi yang sama.

    .circle {
      width: 100px;
      height: 100px;
      border-radius: 50%;
      background-color: #3498db;
    }

    Elemen dengan kelas .circle ini akan menjadi lingkaran dengan diameter 100 piksel.

  • Membulatkan Sudut Spesifik

    Temen-temen juga bisa membulatkan sudut tertentu saja. Misalnya, hanya sudut kanan atas dan kiri bawah:

    div {
      width: 100px;
      height: 100px;
      border-top-right-radius: 20px;
      border-bottom-left-radius: 20px;
      background-color: burlywood;
    }

    Atau, jika ingin mengatur semua sudut sekaligus dengan nilai berbeda:

    div {
      border-radius: left-top right-top right-bottom left-bottom;
    }

    Nilai-nilai tersebut diterapkan berurutan: sudut kiri atas, kanan atas, kanan bawah, dan kiri bawah. Contohnya kita ingin membuat sudut kiri atas sebesar 28px, sudut kanan atas 24px, sudut kanan bawah 32px dan sudut kiri bawah sebesar 18px maka kode-nya seperti berikat ini:

    div {
      width: 100px;
      height: 100px;
      border-radius: 28px 24px 32px 18px;
      background-color: burlywood;
    }

Border radius juga bisa digunakan pada gambar, coba temen-temen perhatikan kode berikut:

<img src="sakura.jpg" alt="sakura-image" class="with-border-radius" />
<img src="sakura.jpg" alt="sakura-image" />

Output

Bisa terlihat perbandingan dari kedua gambar di atas. Menurut temen-temen lebih bagus yang memakai border-radius atau tidak? :D

info

Source code pada chapter ini tersedia di GitHub
https://github.com/mframadann/webdev-dasar-example/tree/main/b-css/chapter-B.4-properti-css/B.4.2-box-styling/B.4.2.2-border-radius