Membuat Border Radius 5 Lapis Warna dengan CSS
Boder adalah sebuah property CSS yang gunanya bagi membangun garis tepi dari batas unsur, kalo boder radius itu berarti fungsinya bagi membangun garis border tersebut menjadi membulat. Disini saya akan menshare cara Membuat Border Radius 5 Lapis Warna dengan CSS. yuk seketika saja kita praktekan bagaimana cara-caranya.
Silahkan kalian buka text editor kesangan kalian dan simpan file html dengan nama index.html dan ketikan struktur kode HTML di bawah ini..
<!DOCTYPE html>
<html lang=en>
<head>
<meta charset=UTF-8>
<title>Border</title>
</head>
<body>
<div class=container>
<div class=lima>
<div class=empat>
<div class=tiga>
<div class=dua>
<div class=satu>
<img src=img/jkt.jpg alt=Boder adalah sebuah property CSS yang gunanya bagi membangun garis tepi dari batas unsur Membangun Border Radius 5 Lapis Warna dengan CSS>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
dapat dilihat dari kode di atas saya punya gambar dengan nama jkt.jpd di pada folder img yang sejajar dengan file index.html, nah gambar tersebut dibungkus oleh 5 kelas berbeda. lihat contoh:
<div class=lima>
<div class=empat>
<div class=tiga>
<div class=dua>
<div class=satu>
<img src=img/jkt.jpg alt=Boder adalah sebuah property CSS yang gunanya bagi membangun garis tepi dari batas unsur Membangun Border Radius 5 Lapis Warna dengan CSS>
</div>
</div>
</div>
</div>
</div>
Bikin folder dengan nama img, setelah itu kita siapkan pun gambarnya dan simpan didalam folder img, kalian dapat cari gambar di internet atau dikomputer kalian, beri nama gambar tersebut dengan nama jkt.jpg.
Ketikan link style setelah tag title. Lihat contoh di bawah:
<link rel=stylesheet href=style.css>
lalu kalian dapat bikin kode cssnya dan beri nama file css dengan nama style.css ketikan kode css di bawah ini.
*{margin: 0; padding: 0;}
.container{
width: 300px;
margin: auto;
margin-top:10px;
}
.satu{
border-radius: 160px;
border:10px solid #2c3e50;
display: inline-block;
overflow: hidden;
height: 300px;
}
.dua{
display: inline-block;
border:10px solid #2ecc71;
overflow: hidden;
border-radius: 100%;
height: 320px;
}
.tiga{
height: 340px;
width: 340px;
border-radius: 100%;
border:10px solid #34495e;
overflow: hidden;
}
.empat{
height: 360px;
width: 360px;
border-radius: 100%;
border:10px solid #2980b9;
overflow: hidden;
}
.lima{
height: 380px;
width: 380px;
border-radius: 100%;
border:10px solid #34495e;
overflow: hidden;
}
img{
width: 300px;
height: 300px;
position: relative;
top:0px;
}ok sekianlah panduan cara Membuat Border Radius 5 Lapis Warna dengan CSS, kalian dapat mencobanya.. semoga bermanfaat… keep coding :D.
Sumber https://kursuswebsite.org
