Membuat Kotak Script dengan Sudut Melengkung di Postingan Blog/Website

Sesuai dengan judul artikelnya, kali ini saya akan mengkaji langkah-langkah untuk membuat kotak script yang memiliki sudut melengkung pada postingan blog/website.

Harapannya, dengan membuat kotak script yang memiliki sudut melengkung di postingan blog ini, maka kotak script atau text box dapat lebih menarik perhatian pengunjung dalam membaca artikel kita. Jadi bentuknya nggak kotak-kotak terus, bisa jadi membosankan dan perlu adanya variasi.

Cara membuat kotak script dengan sudut yang melengkung di postingan blog, sebenarnya tidak jauh berbeda dengan “Cara membuat kotak script sederhana” Hanya saja terdapat penambahan kode script CSS (Cascading Style Sheet) terhadap tag <div> di HTML-nya, yaitu “border-radius”.

Apa itu border-radius?

Border radius (border-radius) adalah salah satu property pada bahasa program CSS3, dan border-radius  ini fungsinya yaitu untuk membuat lengkungan terhadap sudut kotak tag html pada postingan blog/website.

Biasanya kalau kita berikan nilai height dan width terhadap tag html, maka unjungnya otomatis dapat membentuk sudut 90° atau persegi. Nah, bersama border-radius ini kita sanggup membuat lengkungan di sudut tadi.

Contoh kotak script dengan sudut melengkung di postingan blog/website - Sulistia-One

Scrip dari code di atas yaitu :

<div style="background-color: white; border-bottom: 5px solid rgb(34, 136, 221); border-radius: 30px; border-top: 5px solid red; color: green; overflow: auto; padding: 10px; text-align: center;">Contoh kotak script dengan sudut melengkung di postingan blog/website - Sulistia-One</div>

Awalnya aku sempet bingung melihat tutorial cara memicu kotak script dengan sudut melengkung di beberapa artikelnya dari para mastah dan suhu. Saya mendapatkan dua versi, ada yang pakai markup “-moz-border-radius”. Dan ada terhitung yang pakai “border-radius”.

Well, pengalaman adalah guru yang terbaik. Jadi aku akan share pengalaman yang mungkin tidak berharga ini. Alih-alih dengan alesan penisirin, aku pun sudah mencoba ke-2 markup tersebut. Ternyata hasilnya serupa saja.

FYI, setelah ngulik sana sini, Info yang aku bisa bahwa sebelum markup “border-radius” mempunyai CSS3 belum support di beberapa browser. Firefox sudah terlebih dahulu memicu versi mereka sendiri yaitu “-moz-border-radius”.

Kesimpulan, markup “-moz-border-radius dan border-radius” fungsinya serupa yaitu untuk memicu kotak dengan sudut melengkung. Bisa dikatakan “border-radius” itu markup yang sudah di-update dan sudah support di beberapa browser. Seperti : Chrome, Safari, Firefox dan Opera, IE (Internet Explorer).

Ah, lupakan perihal browser, back to topick!

Shorthand untuk border-radius ini adalah 

“border-radius : [value] ;” atau  “border-radius : [topleft topright bottomright bottomleft] ;”  

Contoh : border-radius : 0px 50px 50px 0px ;

Sebagai catatan : cara penulisan value sesuai dengan arah jarum jam, dan jika semua nilai border radius-nya sama, kita cukup mengetikkan satu value saja.

Contoh : border-radius : 10px ; (artinya semua sudut akan sama melengkung sebesar 10 pixel).

Namun sebelum kita masuk ke cara membuat kotak script dengan sudut melengkung di postingan blog, terlebih dahulu kita mempelajari kode script yang akan kita gunakan, dan lihat preview gambar kotak script-nya.

Mau coba?? 😎

Script box script di atas

<div style="background-color: white; border-radius: 100px 50px; border: 4px solid red; box-shadow: 0px 0px 20px; font-size: 18px; font-weight: bold; margin: 0.5rem 0px 1rem; overflow: hidden; padding: 20px; position: center; text-align: center; transition: all 0.25s ease 0s;">Mau coba?? 😎</div>

Kotak Script minimalis tanpa lis border

<div style="background-color: #ffad08; border-radius: 20px; padding: 10px; text-align: center;"> Tulis script anda di sini..! </div>

Kotak Script dengan single-border solid 2px

<div style="background-color: #6fa8dc; border-radius: 20px; border: 2px solid rgb(178, 34, 34); padding: 10px; text-align: center;"> Tulis script anda di sini..! </div>

Kotak Script dengan single-border solid 4px

<div style="background-color: #f3f3f3; border-radius: 20px; border: 4px solid rgb(153, 153, 153); padding: 10px; text-align: left;"> Tulis script anda di sini..! </div>

Kotak Script dengan double-border

<div style="background-color: #ff5c5c; border-radius: 20px; border: 3px double rgb(255, 255, 255); padding: 10px;"> Tulis script anda di sini..! </div>

Kotak Script dengan top-border

<div style="background-color: white; border-radius: 30px; border-top: 10px solid red; color: green; overflow: auto; padding: 10px; text-align:center;"> Tulis script anda di sini..! </div>

Kotak Script dengan left-border

<div style="background-color: #f3f3f3; border-left: 10px solid rgb(34, 136, 221); border-radius: 20px; padding: 10px; text-align: left;"> Tulis script anda di sini..! </div>

Kotak Script dengan left-right border

<div style="background-color: ghostwhite; border-left: 10px solid gray; border-radius: 30px; border-right: 10px solid gray; padding: 10px; text-align: center;"> Tulis script anda di sini..! </div>

Kotak Script dengan dotted-border (garis titik-titik/dots)

Tulis script anda di sini..!

Kotak Script dengan dashed-border (garis terputus-putus)

<div style="background-color: #fff952; border-radius: 20px; border: 4px dashed rgb(220, 20, 60); padding: 10px;"> Tulis script anda di sini..! </div>

Kotak script dengan inset-border (seperti tertaman pada halaman postingan)

<div style="background-color: lightskyblue; border-radius: 20px; border: 4px inset white; padding: 10px;"> Tulis script anda di sini..! </div>

Kotak script dengan outset-border (seperti keluar dari halaman postingan)

<div style="background-color: darkturquoise; border-radius: 20px; border: 4px outset red; padding: 10px; text-align: center;"> Tulis script anda di sini..! </div>

Kotak script dengan ridge-border (seperti timbul)

<div style="background-color: red; border-radius: 20px; border: 4px ridge rgb(0, 191, 255); color: white; padding: 10px;"> Tulis script anda di sini..! </div>

Kotak script dengan groove-border (seperti masuk kedalam halaman)

<div style="background-color: #ffe599; border-radius: 20px; border: 4px groove rgb(170, 170, 170); padding: 10px;"> Tulis script anda di sini..! </div>

Keterangan :

• border-radius : semakin besar value-nya maka sudut kotak script semakin melengkung.
• background-color : warna kotak script, silahkan diganti dengan warna kesukaan sobat (boleh pakai nama warna, kode warna/ hexadesimal, atau RGB / red-green-blue)
• text-align atau t-align : posisi tulisan (left-center-right)

Silahkan berkreasi sendiri, misalnya coba bagaimana cara membuat gambar dengan sudut melengkung (border-radius) , seperti punya miminho di bawah ini. Keren yekan?? 😄

Subscribe to receive free email updates: