0 Membuat Rounded Corner dengan CSS

Gmn temen-temen ingin membuat text border yang agak membulat (rounded)? Biasanya kita membuat rounded border dengan menggunakan graphic yang telah diedit lewat photoshop atau graphic editor lainnya. Ada cara mudah untuk membuatnya dengan menggunakan CSS dengan begini bisa dengan mudah untuk memasukkan ke dalam web atau blog kita.

Langsung ke Live Example'nya aja okke..

border-radius: 1em/5em;

/* is equivalent to */

border-top-left-radius:         1em 5em;
border-top-right-radius:        1em 5em;
border-bottom-right-radius:     1em 5em;
border-bottom-left-radius:      1em 5em;

border-radius: 4px 3px 6px / 2px 4px;

/* is equivalent to: */

border-top-left-radius:         4px 2px;
border-top-right-radius:        3px 4px;
border-bottom-right-radius:     6px 2px;
border-bottom-left-radius:      3px 4px:

sample1:

border: solid 10px;
 
 /* the border will curve into a 'D' */
 -moz-border-radius: 0 50px 50px 0;
       border-radius: 0 50px 50px 0; 
padding: 15px;

sample2:

border: groove 1em red;
 
       -moz-border-radius: 2em; 
    -webkit-border-radius: 2em;
            border-radius: 2em;
padding: 15px;
 

sample3

background: gold;
  border: ridge gold;
 
    -moz-border-radius: 13em/3em;
 -webkit-border-radius: 13em 3em;
         border-radius: 13em/3em; 
padding: 15px; 

sample4

background: gold;
 
   -moz-border-radius: 40px 10px;
        border-radius: 40px 10px; 
padding: 15px; 

sample5

background: black;
color: gray;
border-radius: 50%; 
padding: 15px; 

sample1

sample 2

sample3

sample4

sample5

style ini bisa kamu masukkan untuk<div><pre> dan yang lain coba sendiri ya...

BACA JUGA!!

blog trik

• TABEL TAG HTML
• Pedoman Aksesibilitas Konten WEB
• Tambahkan Fitur Kurs Rupiah dari BCA
• Membuat Read More

html

• TABEL TAG HTML
• Pedoman Aksesibilitas Konten WEB
• Tambahkan Fitur Kurs Rupiah dari BCA
• Tabel Kode Warna