Cara Penggunaan Border Radius | Whello Indonesi

SHARE ARTICLE :

7,119
cara penggunaan border radius

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.


		

	


		

		

	
	

		
		

			
cara penggunaan border radius

		

	





				7,119
			
				

				
				
									

													

								

									

										
Apa itu Border Radius?

										
									

									

										
Border Radius adalah properti CSS yang digunakan untuk mengubah bentuk sudut elemen HTML, seperti kotak (div), gambar, atau tombol. Properti ini memungkinkan kamu untuk membuat sudut-sudut elemen menjadi lebih melengkung atau bundar dengan menambahkan nilai radius.

									

								

							

													

								

									

										
Bagaimana cara menggunakan Border Radius?

										
									

									

										
Untuk menggunakan Border Radius, kamu harus menambahkan properti "border-radius" pada elemen CSS yang ingin kamu ubah bentuknya. Kamu dapat menentukan satu nilai untuk membuat sudut yang sama pada semua sisi elemen atau empat nilai untuk mengatur sudut masing-masing sisi secara terpisah.

									

								

							

													

								

									

										
Apakah Border Radius hanya berlaku untuk kotak?

										
									

									

										
Awalnya, Border Radius hanya berlaku untuk kotak atau elemen dengan properti "display: block". Namun, saat ini, dengan perkembangan CSS, properti Border Radius juga dapat digunakan pada elemen lain seperti gambar, tombol, atau bahkan elemen teks.

									

								

							

													

								

									

										
Apakah semua browser mendukung Border Radius?

										
									

									

										
Ya, hampir semua browser modern mendukung properti Border Radius. Namun, perlu diperhatikan bahwa beberapa versi browser yang sangat tua mungkin tidak sepenuhnya mendukung atau memiliki perbedaan dalam cara mengimplementasikan properti ini.

									

								

							

													

								

									

										
Apakah Border Radius mempengaruhi kinerja website?

										
									

									

										
Tidak, properti Border Radius tidak mempengaruhi kinerja website secara signifikan. Properti ini hanya mempengaruhi tampilan visual elemen saja dan tidak berdampak pada kecepatan muat halaman atau kinerja situs secara keseluruhan.

									

								

							

											

								 
				
				
				
				
				
            

            
        


    


    

        

	

								
					

						

							

								

									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
														
							15 Plugin WordPress Terbaik Yang Harus Kamu Install!

						
					
 					
					

						

															Baca juga
							
							Mengenal dan Cara Menggunakan FTP
						
					
 		

		

		

		

	

	

		

			
Tips lainnya dari kami


		

	


		

		

	
	

													
					

						

							
							

								

									video ad format								

							

							

								
Ketahui Jenis-Jenis Video Ad Format di Youtube

								

									
 4 min 

									

																													

									

										Giras Utomo								
									

								

								
Jelajahi berbagai  format iklan video di YouTube, mulai dari TrueView hingga bumper ads. Pilih sesuai dengan kampanye kamu.



								Baca Selengkapnya
							

						

					


																
					

						

							
							

								

									demand gen campaigns								

							

							

								
Mengenal Demand Gen Campaigns pada Google Ads

								

									
 6 min 

									

																													

									

										Giras Utomo								
									

								

								
Kenali strategi Demand Gen Campaigns pada Google Ads untuk menjangkau target pasar dengan efektif untuk bisnis kamu.



								Baca Selengkapnya
							

						

					


																
					

						

							
							

								

																	

							

							

								
Google Ads Experiments: Cara Efektif Untuk Test Campaign Kamu!

								

									
 7 min 

									

																													

									

										Giras Utomo								
									

								

								
Ketahui Google Ads Experiments yang efektif untuk menguji dan meningkatkan kinerja iklan kamu, temukan langkah praktisnya dalam artikel ini. 



								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
										
					


	



				7,119
			

		

		

	



				7,119
			
    


	






	







	

		

			
Ready to Grow?


		

	


		

		

	

	

						
					
						
						
							+62822 8478 3855