SHARE ARTICLE :

4,558

Dalam sebuah website, mungkin kamu pernah melihat sebuah elemen atau gambar yang bordernya (bagian tepinya) berbentuk elips (lengkungan) untuk membuat elemen atau gambar tersebut semakin menarik.

Misalnya kamu bisa melihat pada gambar berikut.

contoh border radius

Atau seperti gambar berikut.

contoh element yang menggunakan border radius

Nah lengkungan di setiap sudut elemen pada gambar diatas tidak didesain khusus menggunakan aplikasi edit gambar tertentu. Namun dibuat menggunakan properti “Border Radius”.

Apa Itu Border Radius?

Border Radius merupakan properti untuk membuat suatu element memiliki tepian yang elips atau umumnya disebut sudut lengkungan.

Dengan adanya properti border radius, kamu bisa berkreasi dengan menambahkan lengkungan-lengkungan halus di setiap sudut border, hingga memungkinkan kamu untuk membuat sebuah lingkaran.

Biasanya, ada 4 jenis border radius yang bisa kamu gunakan.

  • Border radius bagian kiri atas.
  • Border radius pada bagian kanan atas.
  • Border radius kiri bawah.
  • Dan border radius kanan bawah.

Berikut syntax yang digunakan untuk membuat border radius:

border-radius: 30px;

Contoh Penggunaan Border Radius

Untuk menggunakan border radius, kamu bisa melihat contoh dibawah ini.

Contoh 1

Berikut contoh penggunaan border radius pada setiap sudut element yang memiliki ukuran radius yang sama.

Syntax:

<!DOCTYPE html>

<html>

<head>

<title>Whello</title>

<style>

.GFG {

border-radius: 35px;

background: #ff69b4;

padding: 30px;

text-align: center;

width: 300px;

height: 120px;

}

</style>

</head>

<body>

<div class="GFG">

<h2>Contoh 1</h2>

<p>border-radius: 35px;</p>

</div>

</body>

</html>

Result:

contoh penggunaan border radius

Contoh 2

Border radius untuk menetapkan nilai pertama sebagai sudut kiri atas dan kanan bawa, serta nilai kedua sebagai sudut kanan atas dan kiri bawah.

Syntax:

<!DOCTYPE html>

<html>

<head>

<title>Whello</title>

<style>

.GFG {

border-radius: 20px 40px;

background: #ff69b4;

padding: 30px;

text-align: center;

width: 300px;

height: 120px;

}

</style>

</head>

<body>

<div class="GFG">

<h2>Contoh 2</h2>

<p>border-radius: 20px 40px;</p>

</div>

</body>

</html>

Result:

caa menggunakan border radius

Contoh 3

Border radius untuk mengatur nilai pertama untuk sudut kiri atas, nilai kedua untuk sudut kanan atas dan kiri bawag, serta nilai ketiga untuk sudut kanan bawah.

Syntax:

<!DOCTYPE html>

<html>

<head>

<title>Whello</title>

<style>

.GFG {

border-radius: 20px 40px 60px;

background: #ff69b4;

padding: 30px;

text-align: center;

width: 300px;

height: 120px;

}

</style>

</head>

<body>

<div class="GFG">

<h2>Contoh 3</h2>

<p>border-radius: 20px 40px 60px;</p>

</div>

</body>

</html>

Result:

cara penggunaan border radius

Contoh 4

Border radius untuk mengatur nilai radius pertama, kedua, ketiga, dan keempat untuk masing-masing sudut kiri atas, kanan atas, kanan bawah, dan kiri bawah.

Syntax:

<!DOCTYPE html>

<html>

<head>

<title>Whello</title>

<style>

.GFG {

border-radius: 20px 40px 60px 80px;

background: #ff69b4;

padding: 30px;

text-align: center;

width: 300px;

height: 120px;

}

</style>

</head>

<body>

<div class="GFG">

<h2>Contoh 4</h2>

<p>border-radius: 20px 40px 60px 80px;</p>

</div>

</body>

</html>

Result:

coding border radius

Contoh 5

Border radius untuk mengatur nilai bagian kiri atas.

Sintax:

<!DOCTYPE html>

<html>

<head>

<title>Whello</title>

<style>

.GFG {

border-top-left-radius: 35px;

background: #ff69b4;

padding: 30px;

text-align: center;

width: 300px;

height: 120px;

}

</style>

</head>

<body>

<div class="GFG">

<h2>Contoh 5</h2>

<p>border-top-left-radius: 35px;</p>

</div>

</body>

</html>

Result:

menggunakan border radius

Contoh 6

Border radius untuk mengatur nilai bagian kanan atas.

Sintax:

<!DOCTYPE html>

<html>

<head>

<title>Whello</title>

<style>

.GFG {

border-top-right-radius: 35px;

background: #ff69b4;

padding: 30px;

text-align: center;

width: 300px;

height: 120px;

}

</style>

</head>

<body>

<div class="GFG">

<h2>Contoh 6</h2>

<p>border-top-right-radius: 35px;</p>

</div>

</body>

</html>

Result:

border radius html

Contoh 7

Border radius untuk mengatur nilai bagian kiri bawah.

Syntax:

<!DOCTYPE html>

<html>

<head>

<title>Whello</title>

<style>

.GFG {

border-bottom-left-radius: 35px;

background: #ff69b4;

padding: 30px;

text-align: center;

width: 300px;

height: 120px;

}

</style>

</head>

<body>

<div class="GFG">

<h2>Contoh 7</h2>

<p>border-bottom-left-radius: 35px;</p>

</div>

</body>

</html>

Result:

border radius css



		

	


	

		

			
Contoh 8


Border radius untuk mengatur nilai bagian kanan bawah.


Syntax:


<!DOCTYPE html>

<html>

<head>

<title>Whello</title>

<style>

.GFG {

border-bottom-right-radius: 35px;

background: #ff69b4;

padding: 30px;

text-align: center;

width: 300px;

height: 120px;

}

</style>

</head>

<body>

<div class="GFG">

<h2>Contoh 7</h2>

<p>border-bottom-left-radius: 35px;</p>

</div>

</body>

</html>


Result:


coding untuk membuat border radius


		

	


	

		

			
Contoh 9


Border radius untuk mengatur semua sudut (kiri atas, kanan atas, kiri bawah, dan kanan bawah) dengan nilai tertentu.


Syntax:


<!DOCTYPE html>

<html>

<head>

<title>Whello</title>

<style>

.GFG {

border-top-left-radius: 30px;

            border-top-right-radius: 70px;

            border-bottom-left-radius: 20px;

            border-bottom-right-radius: 40px;

background: #ff69b4;

padding: 30px;

text-align: center;

width: 300px;

height: 120px;

}

</style>

</head>

<body>

<div class="GFG">

<h2>Contoh 9</h2>

<p>border-top-left-radius: 30px;

            <br>border-top-right-radius: 70px;

            <br>border-bottom-left-radius: 20px;

            <br>border-bottom-right-radius: 40px;</p>
</div>

</body>

</html>


Result:


coding untuk border radius


Nah itulah 9 contoh penggunaan border radius untuk sebuah elemen, sekarang giliran kamu mengatur berbagai border radius sesuai dengan  kebutuhan kamu. Jangan lupa tulis pengalaman kamu di kolom komentar dibawah ya. 


Semoga bermanfaat dan selamat mencoba.


		

	





				4,558
			
				
				
								 
				
				
				
				
				
            

            
        


    


    

        

	

								
					

						

							

								

									damar lingkaran besar									damar atas								

							

							
							

								
Damar Anggoro

								
							


						

					


						


	
		

		

	


	

						
					


	
		

		

	
	

		

			
+62822-8478-3855


		

	



	

		

			
Ingin konsultasi

dengan para specialist

Whello?


		

	


		

		

	
                

                        
 
 

                            
                        
Kapan kamu bisa dihubungi?(Required)

								
								
							

								
								
							

								
								
							

        
  
            
            
            
            
            
            
            
            
            
        

                        

                        



		

		

	

	

		

			
Apapun tujuan brand kamu, Whello siap membantu!


		

	


		

		

	

	

						
					
						
						
							Mulai konsultasi!
										
					


	
		

								
					

						

															Baca juga
														
							Penting! Plugin WordPress Yang Harus Kamu Install

						
					
 					
					

						

															Baca juga
							
							Mengenal dan Cara Menggunakan FTP
						
					
 		

		

		

		

	

	

		

			
Tips lainnya dari kami


		

	


		

		

	
	

													
					

						

							
							

								

									cara meningkatkan domain authority								

							

							

								
Cara Meningkatkan Domain Authority, Ini Langkah yang Harus Dilakukan

								

									
 4 min 

									

																													

									

										Dwi Aisyah Naily								
									

								

								
Domain authority merupakan salah satu faktor penting dalam SEO. Berikut beberapa cara meningkatkan domain authority yang bisa kamu lakukan.



								Baca Selengkapnya
							

						

					


																
					

						

							
							

								

									internal linking								

							

							

								
Panduan Lengkap Memaksimalkan Internal Linking untuk Optimasi SEO

								

									
 4 min 

									

																													

									

										Ridha								
									

								

								
Tingkatkan kualitas SEO dan pengalaman pengguna pada website dengan mengoptimalkan penggunaan internal linking yang efektif. Ini panduannya!



								Baca Selengkapnya
							

						

					


																
					

						

							
							

								

									video ads								

							

							

								
Video Ads: Pengertian dan 7 Manfaatnya untuk Meningkatkan Branding

								

									
 5 min 

									

																													

									

										Eko Pramono								
									

								

								
Sebagai content creator, kamu pasti sudah mengetahui istilah video ads. Yuk, simak penjelasan apa saja manfaatnya untuk tingkatkan branding!



								Baca Selengkapnya
							

						

					


						


	
	

		

		

	

	

		

			
Follow us on Instagram


Temukan tips bermanfaat digital marketing serta keseruan spesialis Whello dalam menumbuhkan brand, hanya di Instagram @whello.indonesia. Follow, ya!


		

	



		

		

	

	

		

			


	
    

		    


	


	
	



	    
	
	




		

	



		

		

	

	

						
					
						
						
							Follow kami sekarang
										
					


	



				4,558
			

		

		

	



				4,558
			
    


	






	







	

		

			
Ready to Grow?


		

	


		

		

	

	

						
					
						
						
							+62822 8478 3855