Berikut akan saya share cara membuat rounded corner dengan CSS, arti dari corner yang bentuknya tidak siku-siku seperti border pada umumnya, tetapi bentuknya membulat dengan menggunakan gambar untuk membuat round corner. Yaitu dengan menggunakan CSS (Cascading Style Sheet). Ada beberapa syntax CSS yang harus kita gunakan untuk membuat round corner. Dimana setiap syntax mempunyai perannya sendiri untuk tiap web browser. Jika ingin membuat rounded corner, maka gunakanlah CSS beserta gambar dan syntax tersebut. Secara dasar syntax untuk membuat rounded corner adalah seperti ini:
.roundcont {
width: 100%;
background-color: #f90;
color: #fff;
}
.roundcont p {
margin: 0 10px;
}
.roundtop {
background: url(tr.gif) no-repeat top right;
}
.roundbottom {
background: url(br.gif) no-repeat top right;
}
img.corner {
width: 15px;
height: 15px;
border: none;
display: block !important;
}
0 comments:
Post a Comment