Cara Membuat Sudut Lengkung Pada Garis Border

Cara Membuat Sudut Lengkung Pada Garis Border – Salah satu trik untuk memperindah tampilan blog ialah dengan memberikan efek/sudut lengkung pada garis border. Bukan hanya memperindah akan tetapi juga dapat memberi kesan manis dan elegant.

Syntax dasar CSS3:

border-radius: 30px 0px 30px 0px;
-moz-border-radius: 30px 0px 30px 0px;
-webkit-border-radius: 30px 0px 30px 0px;
border: 2px solid #72C7F8;
padding:10px;

Catatan:
» moz = compatible dengan browser mozila, webkit = compatible dengan browser chrome dan safari.
» radius: adalah code perintah untuk membuat sudut lengkung.
» border: adalah code perintah untuk bagian garis-garis sisinya.
» padding: adalah code perintah untuk jarak antara tulisan dengan border.
Syntax lengkap CSS3 adalah sebagai berikut.
.lengkung{
border-radius: 30px 0px 30px 0px;
-moz-border-radius: 30px 0px 30px 0px;
-webkit-border-radius: 30px 0px 30px 0px;
border: 2px solid #72C7F8;
padding:10px;
}

Cara penggunaan pada postingan:

<div class=”lengkung”>
Contoh garis lengkung created by junedalbughisy.blogspot.com
</div>

Untuk melihat hasilnya klik link demo di bawah ini.

Semoga tutorial kali ini bermanfaat. Dan jangan lupa like dan komentarnya demi kemajuan blog ini.
Terimakasih….!!!

4 komentar:

  1. bro tutorialnya bermanfaat banget nie buat ane. tks

    BalasHapus
  2. terima kasih gan,, berkat tutorialnya saya bisa membuat border melengkung di blog saya,, kunjungan baliknya di dokumentasi-ilham.blogspot.com

    BalasHapus
  3. MAKASIH BANYAK TUTORIALNYA SOB! MAMPIR YA! http://mukeu.blogspot.com :)

    BalasHapus
Catatan:
Untuk menyisipkan video, gunakan tag <i rel="youtube">URL YOUTUBE ANDA...</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">URL GAMBAR ANDA...</i>
Untuk menyisipkan kode, gunakan tag <i rel="code">KODE ANDA...</i>
Untuk menyisipkan kode panjang, gunakan tag <i rel="pre">KODE ANDA...</i>
Untuk menyisipkan catatan, gunakan tag <b rel="quote">CATATAN ANDA...</b>
Untuk menciptakan efek tebal gunakan tag <strong>TEKS ANDA...</strong>

NB: Jika ingin menuliskan kode pada komentar harap gunakan Tool untuk mengkonversi kode tersebut agar kode bisa muncul dan jelas atau gunakan tool dibawah "Konversi Kode di Sini!"

Jika ingin menuliskan komentar yang keluar dari topik pada artikel ini silahkan kehalaman OOT (out of topic) dengan menekan tombol OOT di bawah ini.

Konversi Kode di Sini!OOT

 
Design by Juned al~Bughisy Copyright © 2012 ~ 2013 Powered by Blogger
Back to Top