cara membuat sudut melengkung dengan CSS
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;
border-bottom-left-radius: 15px;
1 Comments
Apakah bisa di bikin slide ke kiri?