Sunday, January 22, 2017
Rounded Corner Membuat Sudut menjadi Tumpul
Rounded Corner Membuat Sudut menjadi Tumpul
[laelamajdnun.info]- Rounded Courner, apasih rounded Courner itu? Rounded courner merupakan lengkungan atau belokan dari sebuah persegi, kadang kita melihat sebuah webiste dengan sudut tidak lancip, tatapi melengkungya seperti belokan pada pada jalan yang menikung, seakan akan tidak ada pertemuan antara garis vertikal dan horizontalnya, teknik inilah yang dinamakan rounded corner, teknik ini dibuat menggunakan CSS, berikut script nya :
Full rounded corner :
.kotak-rounded-corner {
background-color:#FFFF00;
border:2px solid #FF0000;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
border-radius: 10px; }
Rounded corner di kiri atas :
.kotak-rounded-corner {
background-color:#FFFF00;
border:2px solid #FF0000;
-moz-border-radius-topleft: 10px;
-webkit-border-radius-topleft: 10px;
-khtml-border-radius-topleft: 10px;
border-top-left-radius: 10px; }
Rounded corner di atas :
.kotak-rounded-corner {
background-color:#FFFF00;
border:2px solid #FF0000;
-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 10px;
-webkit-border-radius-topleft: 10px;
-webkit-border-radius-topright: 10px;
-khtml-border-radius-topleft: 10px;
-khtml-border-radius-topright: 10px;
border-top-left-radius: 10px;
border-top-right-radius: 10px; }
Rounded corner di bawah :
.kotak-rounded-corner {
background-color:#FFFF00;
border:2px solid #FF0000;
-moz-border-radius-bottomleft: 10px;
-moz-border-radius-bottomright: 10px;
-webkit-border-radius-bottomleft: 10px;
-webkit-border-radius-bottomright: 10px;
-khtml-border-radius-bottomleft: 10px;
-khtml-border-radius-bottomright: 10px;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px; }
Go to link Download
