Home
CSS

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.

Sudut lengkung dalam kehidupan sehari-hari akan memberi kesan smooth dan elegan. Berbeda halnya dengan sudut lancip memberi kesan tegas dan tajam.

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;
  • 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….!!!

6 comments

  1. bro tutorialnya bermanfaat banget nie buat ane. tks
    • Sama-sama gan...
  2. terima kasih gan,, berkat tutorialnya saya bisa membuat border melengkung di blog saya,, kunjungan baliknya di dokumentasi-ilham.blogspot.com
    • sama-sama gan
  3. MAKASIH BANYAK TUTORIALNYA SOB! MAMPIR YA! http://mukeu.blogspot.com :)
    • Sama-sama gan
  1. Komentar ini, diurutkan dari yang terlama
  2. Tinggalkan komentar sesuai topik tulisan
  3. Apabila ada pertanyaan diluar artikel silahkan kunjungi Out off topic
  4. Centang Beri tahu saya untuk mendapatkan notifikasi via Email ketika ada balasan
  5. Untuk menghapus komentar, hanya dapat dilakukan oleh admin.
Masukkan URL Gambar atau Potongan Kode, atau Quote, lalu klik tombol yang kamu inginkan untuk di-parse. Salin hasil parse lalu paste ke kolom komentar.