Apa dan Bagimana Cara Penggunaan Border Radius?

 4 min / Tips Coding / Border-radius 

Dalam sebuah website, mungkin kamu pernah melihat sebuah elemen atau gambar yang bordernya (bagian tepinya) berbentuk elips (lengkungan) untuk membuat elemen atau gambar tersebut semakin menarik.


Misalnya kamu bisa melihat pada gambar berikut.


contoh border radius











Atau seperti gambar berikut.











Nah lengkungan di setiap sudut elemen pada gambar diatas tidak didesain khusus menggunakan aplikasi edit gambar tertentu. Namun dibuat menggunakan properti “Border Radius”.


Apa Itu Border Radius?

Border Radius merupakan properti untuk membuat suatu element memiliki tepian yang elips atau umumnya disebut sudut lengkungan.


Dengan adanya properti border radius, kamu bisa berkreasi dengan menambahkan lengkungan-lengkungan halus di setiap sudut border, hingga memungkinkan kamu untuk membuat sebuah lingkaran.


Biasanya, ada 4 jenis border radius yang bisa kamu gunakan.


  • Border radius bagian kiri atas.
  • Border radius pada bagian kanan atas.
  • Border radius kiri bawah.
  • Dan border radius kanan bawah.
  • Berikut syntax yang digunakan untuk membuat border radius


border-radius: 30px;


Contoh Penggunaan Border Radius

Untuk menggunakan border radius, kamu bisa melihat contoh dibawah ini.


Contoh 1

Berikut contoh penggunaan border radius pada setiap sudut element yang memiliki ukuran radius yang sama.

Syntax:

<!DOCTYPE html>

<html>

    <head>

        <title>MalasNgoding | Border-Radius</title>


    <style>

    .borderRadius {

        border-radius: 35px;

        background: #ff69b4;

        padding: 30px;

        text-align: center;

        width: 300px;

        height: 120px;

    }

    </style>


    </head>

<body>

   <div class="borderRadius">

      <h2>Contoh 1</h2>

      <p>border-radius: 35px;</p>

   </div>

</body>

</html>


Result:



Komentar

Posting Komentar