This Blog is protected by DMCA.com

Sunday, April 21, 2013

cara membuat sudut melengkung dengan CSS

disetiap waktu kita jika membuat border pasti hasilnya menjadi persegi ataupun persegi panjang, namun jika kita lihat blog atau website yang mempunyai border dengan sudut yang kelihatan tumpul, atau contohnya seperti gambar disamping.
dengan sudut yang tumpul juga memberi variasi dalam design yang kita buat, sudut melengkung ini juga disebut juga dengan border radius..
naah kali ini saya akan membahas cara membuat border radius dengan CSS, langsung saja tutor nya :


  • membuat semua sudut menjadi tumpul



#tumpul{
border : 2px;
background-color: green;
width : 350px;
padding : 2px 3px;
-moz-border-radius : 25px;
-webkit-border-radius: 25px;
}



penjelasan :
border adalah garis tepi dengan ketebalan yang dapat ditentukan angka bersatuan px
background-color yaitu warna background pada sebuah area
width adalah lebar, yang ditentukan dengan angka px(pixel) atau %(persen)
padding adalah jarak teks dari garis tepi
-moz-border-radius dan -webkit-border-radius adalah kode untuk membuat setiap pojok area menjadi tumpul

  • membuat sudut sudut tertentu saja yang  menjadi tumpul

border-top-left-radius: 15px; digunakan jika kita hanya ingin membuat lengkungan pada sudut kiri atas
border-top-right-radius: 15px; digunakan jika kita hanya ingin membuat lengkungan pada sudut kanan atas.
border-bottom-right-radius: 15px; digunakan jika kita hanya ingin membuat lengkungan pada sudut kanan bawah.
border-bottom-left-radius: 15px; digunakan jika kita hanya ingin membuat lengkungan pada sudut kiri bawah

contoh :


border-top-right-radius : 15px;
border-bottom-left-radius: 15px;

1 Comments

Apakah bisa di bikin slide ke kiri?

 

Daftar isi artikel