CSS3 Border Rounded

Di artikel sebelumnya saya membahas sangat lengkap mengenai cara mengatur border di css.

Kali ini, saya ingin membahas mengenai membuat border yang melengkung di setiap pojoknya.

seperti ini

Format Penulisan

Untuk menyetting border radius, tinggal ditulis border-radius dengan format:

border-radius: atas_kiri atas_kanan bawah_kanan bawah_kiri;

Ingat, setiap value angka dalam CSS ditulis dengan urutan searah jarum jam.

Kasus 1:

border-radius: 5px;

Hasilnya semua pojok atas kanan, bawah kanan, kiri bawah, kiri atas diberi nilai rounded 5px.

Kasus 2:

border-radius: 10px 5px;

Hasilnya kiri bawah dan kanan atas bernilai 5px, kiri atas dan kanan bawah 10px.

Contoh Penerapan

Berikut contoh penerapan html dan css dengan value yang berbeda-beda:

<style type="text/css">
.box {
	width: 200px;
	height:200px;
	background: #70EAA7;
	color: black;
	padding: 10px;
	margin:10px;
	float: left;
	text-align: center;
	vertical-align: center
}
.lengkung_1 {
	border-radius: 15px;
}
.lengkung_2 {
	border-radius: 20px 40px;
}
.lengkung_3 {
	border-radius: 40px 10px;
}
.lengkung_4 {
	border-radius: 20px 40px 60px 80px;
}
.lengkung_5 {
	border-radius: 0px 80px 0px 80px;
}
.lengkung_6 {
	border-radius: 50% 100%;
}
.lengkung_7 {
	border-radius: 100%;
}
.lengkung_8 {
	border-radius: 0px 0px 50% 50%;
}
</style>
<div class="box">Box</div>
<div class="box lengkung_1">Box Lengkung 1</div>
<div class="box lengkung_2">Box Lengkung 2</div>
<div class="box lengkung_3">Box Lengkung 3</div>
<div class="box lengkung_4">Box Lengkung 4</div>
<div class="box lengkung_5">Box Lengkung 5</div>
<div class="box lengkung_6">Box Lengkung 6</div>
<div class="box lengkung_7">Box Lengkung 7</div>
<div class="box lengkung_8">Box Lengkung 8</div>

Hasilnya:

Kode Radius tiap Browser

Kadang ada web browser yang harus ditulis khusus supaya efek radiusnya muncul.

Safari

-webkit-border-radius

Firefox

-moz-border-radius

Rounded Generator

Daripada bingung, ada tools online untuk generate rounded dengan mudah yaitu https://border-radius.com.

Tinggal masukin nilai yang kamu inginkan:

Property CSS3 border radius

Berikut ini adalah tabel daftar properti untuk border radius css3:

Properti	Keterangan
border-radius	Shorhand (syntax singkat gabungan) untuk radius corner
border-bottom-left-radius	Menentukan nilai melengkung border di bagian bawah kiri
border-bottom-right-radius	Menentukan nilai melengkung border di bagian bawah kanan
border-top-left-radius	Menentukan nilai melengkung border di bagian atas kiri
border-top-right-radius	Menentukan nilai melengkung border di bagian atas kanan

Sekian tutorial membuat border radius di css3. Semoga bermanfaat ya!