CSS 3 : Border Radius

Border Radius : Hallo Temen temen, di artikel kali ini kita akan belajar mengenai property CSS 3 yaitu border-radius.

Nah Sekarang kita akan belajar lebih detail gimana cara pakai dari border-radius.

Dibawah ini saya sudah siapkan struktur html sederhana, buat kalian yang belum faham apa itu HTML klik di sini.

 


<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>CSS 3 Border Radius</title>

</head>

<body>


    <div></div>


</body>

</html>

 

Lalu di dalam body HTML saya juga sudah siapakan sebuah div kosong, temen temen inget, border radius adalah property CSS 3 yang fungsinya membuat kotak yang kita punya itu ujung ujungnya menjadi tumpul, semakin besar border radius yang kita berikan maka ujung dari kotaknya akan semakin tumpul, missal kita lihat contohya nih, ingat kita diatas sudah siapkan div kosong kita akan manipulasi div tersebut di CSS 3, perhatikan.

 


<style>

    div {

        width: 500px;

        height: 500px;

        background-color: purple;

    }

</style>

 

Dari CSS tersebut mungkin temen temen sudah bisa baca, kalau kita menyuruh CSS membuat sebuah kotak yang lebar dan tingginya 500px, lalu warnanya ungu dan ujungnya pasti lancip, betul ya ?, kalau kita mau bikin ujungnya tumpul kita tinggal pakai property nya CSS 3 yaitu border-radius, seperti dibawah ini.

 


<style>

    div {

       width: 500px;

       height: 500px;

       background-color: purple;

       border-radius: 30px;

    }

</style>

 

Itu ya jadi simple aja cara bikin sudutnya menjadi tumpul itu kita pakai property CSS 3 yang disebut border-radius, nah sudah ya itulah cara mengasih border-radius, semakin besar nilai yang kita tulis di dalam border-radius maka semakin besar pula kotak yang tumpul tersebut, sebenarnya ini ada rumusnya, jadi kalau misalkan border-radius nya itu setengah dari lebar dan tingginya kalau dia kotak dia pasti sudah lingkaran, paham ya, wokay.

 

Selanjutnya kita bisa kasih border radius itu untuk masing masing sisi, kan kalau kita tulis border radius seperti diatas artinya keempat sisinya kan sama, kalau cuman pingin satu sisi gimana ? , nah misalkan saya mau ganti yang tumpul sebelah atas kanan, berarti propertynya adalah border-top-right-radius.

 


<style>

    div {

       width: 500px;

       height: 500px;

       background-color: purple;

       border-top-right-radius: 50%;

    }

</style>

 

Kalau kita pingin yang tumpul bawah sebelah kiri, berarti propertynya adalah border-bottom-right-radius.

Jadi kalaian bisa menuliskan property property seperti dibawah ini :

 

  • border-top-right-radius
  • border-top-left-radius
  • border-bottom-right-radius
  • border-bottom-left-radius

 

Atau kalian mau pakai satu property kayak margin gitu, berarti tinggal tulis border-radius baru kita bikin 4 parameter, mulai dari atas kiri, atas kanan, bawah kanan, yang terakhir bawah kiri, contoh seperti dibawah ini.

 


<style>

    div {

        width: 500px;

        height: 500px;

        background-color: purple;

        border-radius: 50% 0 50% 0;

    }

</style>

 

Baik jadi itu penggunaan dari border radius gampang aja, kalian bisa lihat contoh lain dari penggunaan border radius, kita bisa main main ukuran dari border radius dan disudut mana kita menempatkan border radius tersebut, artikel kali ini sampai sini dulu, saya ABDUL ROSYID pamit, Terima Kasih.

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *