Tutorial Membuat costum border-radius HTML dan CSS

Membuat Costum shape pada border-radius

 FreeLoad —Hallo semua teman-teman pembaca Freeload bagai mana kabarnya hari ini ? semoga sehat selalu ya, Amiin. pada postingan kali ini saya ingin memberikan tutorial membuat kostum border shape pada Css, sebelum saya masuk ke tutorialnya saya akan menjelaskan sedikit mengenai CSS, Css (Cascanding style sheet) yang berfungsi untuk mengatur dan mempercantik tampilan pada elemen- elemen yang terdapat pada HTML. Css di buat oleh Hakon Wium Lie yang rilis pda tahun 1996 dengan nama Css1 dan Css2 dikemmbangkan pada 1998 dan pada saat ini kita sudah menggunakan CSS 3 yang mana pada Css 3 ini Memiliki fitur yang jauh lebih dinamis dibanding css sebelumnya diantaranya dalah fitur animasi 2D dan 3D Border radius ,drop shadow text shadow dan lainnya,

deklarasi border-radius pada css mempunyai peran sebagai memberikan nilai radius pada sudut kotak yang anda buat pada html dan css, terdapat emmpat sudut yang mana anda bisa mengontrol masing masing radius dari sudut tersebut.

contohnya:

Buatlah sebuah div dengan class kotak  pada index.html

<div class="kotak">

</div>

langkah selanjutnya buat style dengan 

width 100px 

height 100px

background-color lightblue

dan margin 100px auto 100px ( margin ini agar posisi kotak tersebutberada di tengah tengah yang mana 100px margin-top, auto kiri kanan, dan 100px margin-bottom.)

<style>

  .kotak{

    width: 100px;

    height: 100px;

    background-color: lightblue;

    margin: 100px auto 100px;

  }

</style>

Setelah anda mengikuti instruksi diatas maka langkah selanjutnya kita masuk pada tahap membuat border-radius. 

<style>

  .kotak{

    width: 100px;

    height: 100px;

    background-color: lightblue;

    margin: 100px auto 100px;

    border-radius: 20px 20px 20px 20px;

  }

</style>

Disini saya akan menjelaskan value pada deklarasi border-radius, 

border-radius terdapat 4 value yang mana value tersebut bisa kita kasih ukuran yang bervariasi 

border-radius: 20px(sudut kiri atas), 20px(sudut kanan atas), 20px(sudut kanan bawah) 20px(sudut kiri bawah). jadi nilai pada border radius di  hitung dari sudut kiri searah putaran jarum jam sampai sudut kiri. Setelah saya memberi border radius maka hasilnya seperti ini.

Jika anda ingin membuat radius pada border tersebut sama besar nilainya anda cukup menuliskan

 border-radius: 20px;

tapi jika anda ingin hanya membuat 2 sisi atau 4 sisi yang berbeda anda bisa membuatnya seperti ini, Untuk elemen nilai pada border radius tidak hanya px tapi anda bisa memberi elemen yang lain seperti %, rem, em dan lainya

border-radius: 40px 10px 40px 10px;

Maka hasilnya akan seperti ini:

Jika anda ingin membuat border yang lebih flexibel, dan anda susah untuk menentukan ukurannya, anda bisa membuat border yang lebih flexsibel dengan mengunjungi website fancy border radius generator, yang mana diwebsite ini anda bebas menentukan radius dari border yang anda inginkan. lalu anda bisa Mempastekan pada style css border radius anda.

 border-radius:30% 70% 70% 30% / 30% 30% 70% 70%;

Sekian dulu tutorial pada kali ini semoga postingan ini bermanfaat bagi pembaca, selamat mencoba.