Membuat Border Radius 5 Lapis Warna dengan CSS

Boder merupakan property CSS yang gunanya untuk membuat garis tepi dari batas elemen, kalo boder radius itu berarti fungsinya untuk membuat garis border tersebut menjadi membulat. Disini saya akan menshare cara Membuat Border Radius 5 Lapis Warna dengan CSS. yuk langsung 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="">
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</body>
</html>

bisa dilihat dari kode di atas saya punya gambar dengan nama jkt.jpd di dalam 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="">
						</div>
					</div>
				</div>
			</div>
		</div>

Buat folder dengan nama img, setelah itu kita siapkan juga gambarnya dan simpan didalam folder img, kalian bisa 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 bisa buat 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 sekian tutorial cara Membuat Border Radius 5 Lapis Warna dengan CSS, kalian bisa mencobanya.. semoga bermanfaat… keep coding :D.

Membuat Border Radius 5 Lapis Warna dengan CSS

Kategori