CSS3 BORDER RADIUS
Border radius adalah seberapa lenkung sudut suatu elemen HTML yang berbentuk seperti lekungan.
Untuk membuat lekungan kode cssnya sebagai berikut.
Border-radius: [value]; atau
Border-radius: [value1][value2][value3][value4];
Misalnya anda membuat dua kotak div, diberi class yang pertama lengkung 1 dan yang kedua lengkung 2.tulis kode berikut ini,
<!DOCTYPE html PUBLIC "-//W3C/DTD XHTML 1.0 Ttransitional//EN"
"http://w3c.org.TRxhtml1/ DTD/xhtml1-transitional.dtd">
<html>
<head>
<title> membuat temple blog untuk pertama kali </title>
<link type="text/css" href="css/style.css" rel="stylesheet"
media="screen" />
<style>
.lengkung1, .lengkung2{
margin:auto;
padding:20px
width: 150px;
height: 100px;}
.lengkung1{
background: red ;
border: 3px solid #333333;
border-radius :20px
}
.lengkung2{
background: blue;
border: 3px solid #333333;
border-radius :20px 100px 39px 64px
}
</style>
</head>
<body>
<div id="wrapper">
<div class="lengkung1">
<h2>Contoh border radius pertama</h2>
</div>
<br/>
<div class="lengkung2">
<h2> contoh border radius kedua</h2>
</div>
</div>
</body>
</html>
dari sintax di atas akan ditampilkan border radius dengan bentuk seperti berikut.
 |
| gambar 1.1 |
 |
| gambar 1.2 |
border-radius:20px 100px 39px 64px;
Nilai-nilai di atas maksudnya adalah 20px itu untuk pojok kiri atas, 100px untuk kanan atas, 39px nilai pojk kanan bawah, dan yang terakhir 64px untuk pojok kiri bawah.
Post a Comment
1. Silahkan komentar dengan sopan.
2. Jangan spam.
3. Boleh komentar menyertakan link tapi tidak aktif.