![[css] mempercantik web dengan fungsi border radius](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgf8j9LOfmOx_Nm6XZOwD8ejJkO8DqLuRoQuH7b22H6giIZ5-im3JPj8jWl6ou_VekHDFGjia12LiLtDjhlW_VcLEDFawck4crz0UT3xASUGcZTRkO0pWjp8M-fkmvZev9j7YLQsB5ufUYK/w800/okes.png "[css] mempercantik web dengan fungsi border radius")
setelah kemaren kita bisa menghubungkan html dan css. sekarang kita menambah kamus dari css kita. mulai dari yang simple tapi bermakna. BORDER RADIUS.
gunanya dari border radius adalah untuk membuat border (pojok) atau tampilannya menjadi lengkung atau ber radius.
scriptnya sangat mudah
#konten {
border-radius: 10px;
}
artinya. div id content nanti pojok-pojoknya menjadi lengkung seperti lingkaran ber jari-jari 10px.
contohnya seperti ini
<html>
<head>
<style type="text/css">
#a {
background-color: red;
width: 100;
height: 100;
border-radius: 50;
text-align: center;
margin: 10;
}
#b {
background-color: blue;
width: 100;
height: 100;
border-radius: 10;
text-align: center;
margin: 10;
}
#c {
background-color: green;
width: 100;
height: 100;
border-top-left-radius: 50;
border-bottom-right-radius: 50;
text-align: center;
margin: 10;
}
#d {
background-color: orange;
width: 100;
height: 100;
border-top-right-radius: 20;
border-bottom-left-radius: 20;
text-align: center;
margin: 10;
}
</style>
</head>
<body>
Border Radius
<div id="a">A</div>
<div id="b">B</div>
<div id="c">C</div>
<div id="d">D</div>
</body>
</html>
dan hasilnya akan menjadi seperti ini
Selamat mencoba. . .
0 Comments: