Cara membuat kotak script dengan border sudut melengkung di postingan blogger

Halo sobat semua jumpa lagi dengan saya www.arieffsetiawan.com Pada tuturial kali ini saya akan share cara membuat kotak box script dengan border sudut melengkung di postingan artikel.

Awalnya saya sempet bingung juga sih melihat tutorial cara membuat kotak script dengan sudut melengkung di beberapa artikelnya yang di tulis oleh para mastah mastah kita.

Nah setelah googling kesana kemari Pada akhirnya Saya menemukan juga cara untuk membuat kotak box script dengan border sudut melengkung dan tidak rata seperti papan catur bro.hehehe

Setelah saya pelajari saya menemukan dua versi untuk membuat kotak box script dengan border sudut melengkung, ada yang menggunakan markup (-moz-border-radius.) Dan ada juga yang menggunakan ( border-radius.)

Pengalaman adalah guru bro. Jadi kali ini saya akan berbagi pengalaman yang muda mudahan saja apa yang saya bagikan ini ada manfaatnya dan bisa membantu para sobat semua yang kebetulan lagi mencari tentang tutorial ini.

Mengenai informasi yang saya dapat bahwa sebelum markup (border-radius) punya CSS3 belum support di beberapa browser. Firefox sudah terlebih dahulu membuat versi mereka sendiri yaitu (-moz-border-radius).

Kesimpulanya, markup (-moz-border-radius dan border-radius) fungsinya sama saja yaitu untuk membuat background atau kotak box dengan sudut melengkung. Bisa dikatakan (border-radius) itu markup yang sudah di update dan sudah support di beberapa browser. Seperti : Chrome, Safari, Firefox, Opera, Dan IE (Internet Explorer).

Kurang lebih seperti ini lah contohnya dari kedua markup Tersebut

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).

<div style="background-color: chocolate; border-radius: 10px; border: 2px solid #000; padding: 5px;"><font color="white">Letakan Script disini sobat...
</font>
</div>

Namun sebelum kita masuk ke cara membuat kotak script dengan sudut melengkung di postingan blog, terlebih dahulu kita mempelajari kode kode script yang akan kita gunakan, dan di bawah ini ada beberapa script yang saya share silahkan anda praktekan dan jika tampilanya kurang pas di hati, silahkan sobat kreasikan lagi.

Border Solid Tampil Kiri

<div style="-moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: #f3f3f3; border-left: 5px solid #2288dd; border-radius: 10px; padding: 10px; t-align: left;">Letakkan Script disini……</div>

Border Solid

<div style="-moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: #f3f3f3; border-radius: 10px; border: 4px solid #999; padding: 10px; t-align: left;">Letakkan Script disini…… </div>

Border Dashed

<div style="-moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: #ffe599; border-radius: 10px; border: 2px dashed #aaa; padding: 10px; t-align: left;">Letakkan Script disini……</div>

Border Double

<div style="-moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: #6fa8dc; border-radius: 10px; border: 4px double #fff; padding: 10px; t-align: left;">Letakkan Script disini……</div>

Border Outset

<div style="-moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: #a2c4c9; border-radius: 10px; border: 4px outset #fff; padding: 10px; t-align: left;">Letakkan Script disini……</div>

Untuk beberapa border radius di atas hanyalah sebagai contoh kecil saja ya, jika anda adalah seorang yang kreatif mungkin bisa memodifikasi yang lebih menarik dan lebih bagus lagi dari contoh di atas.

Oke ya cukup sekian dulu pada artikel cara membuat kotak box script dengan border melengkung semoga bisa membantu dan jika di antara sobat ada yang kurang paham silahkan Tuliskan keluhan anda pada kolom komentar di bawah. Wasalam