Cara menggunakan border-radius css

Dengan CSS3, Anda dapat memberikan setiap elemen "sudut membulat", dengan menggunakan border-radius properti.

Table of Contents Show

CSS3 border-radius - Tentukan Setiap Sudut
TUTORIAL MENARIK LAINNYA
Membuat Bentuk Jajar Genjang Dengan CSS3
Cara Membuat Sliding Menu Dengan CSS3 dan JQuery
Cara Membuat Animasi Preloader Dengan CSS3
Cara Mengganti Warna Placeholder Dengan CSS Cara Mengganti Warna Placeholder Dengan CSS – apa kabar teman-teman sekalian. hehe.. semoga sehat selalu ya. bertemu lagi lewat ... Border radius css untuk apa?
Apa yang dimaksud dengan Border CSS?

Berikut adalah tiga contoh:

1. Sudut lengkung untuk elemen dengan warna latar belakang yang ditentukan:

Sudut tumpul!

2. Sudut dibulatkan untuk unsur dengan perbatasan:

Sudut tumpul!

3. Sudut dibulatkan untuk unsur dengan gambar latar belakang:

Sudut tumpul!

Berikut adalah kode:

Contoh

#rcorners1 {
    border-radius: 25px;
    background: #73AD21;
    padding: 20px;
    width: 200px;
    height: 150px;
}

#rcorners2 {
    border-radius: 25px;
    border: 2px solid #73AD21;
    padding: 20px;
    width: 200px;
    height: 150px;
}

#rcorners3 {
    border-radius: 25px;
    background: url(paper.gif);
    background-position: left top;
    background-repeat: repeat;
    padding: 20px;
    width: 200px;
    height: 150px;
}

Cobalah sendiri "

Tip: The border-radius properti sebenarnya adalah properti singkat untuk border-top-left-radius , border-top-right-radius , border-bottom-right-radius dan border-bottom-left-radius properti.

CSS3 border-radius - Tentukan Setiap Sudut

Jika Anda hanya menentukan satu nilai untuk border-radius properti, radius ini akan diterapkan untuk semua 4 sudut.

Untuk contoh nya buatlah sebuah file html dan sebuah file css. atau teman-teman bisa juga menyisipkan css nya langsung ke file html nya. baca tentang cara penulisan css. di sini kita akan membuat beberapa element html dengan bentuk kotak. dan nantinya akan kita terapkan perintah border-radius css3 ini untuk membuat sudut dari element nya melengkung.

index.html

<!DOCTYPE html>

<html>

<head>

<title>Membuat sudut melengkung dengan css3 | www.malasngoding.com</title>

</head>

<body>

<h1>Membuat sudut melengkung dengan css3 | www.malasngoding.com</h1>

<div class="kotak kotak1">kotak 1</div>

<div class="kotak kotak2">kotak 2</div>

<div class="kotak kotak3">kotak 3</div>

<div class="kotak kotak4">kotak 4</div>

<div class="kotak kotak5">kotak 5</div>

<div class="kotak kotak6">kotak 6</div>

<div class="kotak kotak7">kotak 7</div>

<div class="kotak kotak8">kotak 8</div>

</div>

</body>

</html>

style.css

body{

background: #35A9DB;

font-family: roboto;

text-align: center;

}

h1{

color: #fff;

}

.ketengah{

margin: 10px auto;

width: 1150px;

}

.kotak{

background: #fcfcfc;

padding: 20px;

width: 200px;

float: left;

margin: 20px;

height: 200px;

}

.kotak1{

border-radius: 10px 10px 10px 10px;

}

.kotak2{

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

}

.kotak3{

border-radius: 2px 140px 20px 60px;

}

.kotak3{

border-radius: 20px 10px 80px 10px;

}

.kotak4{

border-radius: 0px 50px 0px 50px;

}

.kotak5{

border-radius: 0px 0px 0px 0px;

}

.kotak6{

border-radius: 100%;

}

.kotak7{

border-radius: 40px 10px;

}

.kotak8{

border-radius: 10px 10px 50% 50%;

}

dan jalankan

membuat sudut melengkung dengan css3

seperti yang teman-teman lihat pada syntax di atas. kita bisa menggunakan perintah border-radius untuk membuat lengkungan di sudut element html.

<div class="kotak kotak1">kotak 1</div>

<div class="kotak kotak2">kotak 2</div>

<div class="kotak kotak3">kotak 3</div>

<div class="kotak kotak4">kotak 4</div>

<div class="kotak kotak5">kotak 5</div>

<div class="kotak kotak6">kotak 6</div>

<div class="kotak kotak7">kotak 7</div>

<div class="kotak kotak8">kotak 8</div>

.kotak1{

border-radius: 10px 10px 10px 10px;

}

.kotak2{

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

}

.kotak3{

border-radius: 2px 140px 20px 60px;

}

.kotak3{

border-radius: 20px 10px 80px 10px;

}

.kotak4{

border-radius: 0px 50px 0px 50px;

}

.kotak5{

border-radius: 0px 0px 0px 0px;

}

.kotak6{

border-radius: 100%;

}

.kotak7{

border-radius: 40px 10px;

}

.kotak8{

border-radius: 10px 10px 50% 50%;

}

rumus penulisan perintah border radius ini adalah sebagai berikut. baca juga : Membuat Efek Hover Zoom Dengan CSS3.

border-radius : nilai_sudut_kiri_atas nilai_sudut_kanan_atas nilai_sudut_kanan_bawah nilai_sudut_kiri_bawah;

pertama masukkan nilai untuk sudut kiri atas, yang kedua nilai sudut untuk kanan atas, ketiga nilai untuk sudut kanan bawah dan yang keempat nilai untuk sudut kiri bawah.

membuat sudut melengkung dengan css3

dan teman-teman bisa menggunakan nilai dalam bentuk persen (%) juga. contoh nya seperti membuat lingkaran yang bisa teman-teman lihat pada kotak 6 di atas. juga bisa hanya memberikan dua nilai value. jika menggunakan dua buah nilai value maka nilai yang pertama di baca nilai atas dan nilai kedua di baca nilai bawah. teman-teman juga bisa hanya memberikan satu nilai value. maka satu nilai value ini akan di gunakan untuk tiap sudut element.

See the Pen tutorial membuat sudut melengkung dengan css3 by Malas Ngoding (@malasngoding) on CodePen.0

sekian dulu tutorial Tutorial CSS3 Part 2 – Membuat Sudut Melengkung Dengan CSS3. semoga dapat bermanfaat.

Incoming search terms:

jilbab rounded shape
membuat tulisan melengkukng dihtml css
css sudut melengkung
bentuk love pakai css
desain form logiin web
cara membuat border radius berdampingan di html
tutorial jilbab rounded shape
Apa itu Jilbab rounded shapes
border radius cuma diatas
cara bikin background melengkung

Diki Alfarabi Hadi

Coding enthusiast. Someone who love learn something new. especially about web programming and web design. happy to share about knowledge and learn from other.

Author's profile
All posts by Diki Alfarabi Hadi

Tags: border radius, border radius css3, color picker, css3 box radius generator, css3 rounded corners cross browser, css3 rounded corners image, efek melengkung css3, jilbab rounded shape, membuat lingkaran dengan css3, pengertian syntax border-radius css3, sudut melengkung css3

Tutorial CSS3 Dasar

#1. Pengenalan CSS3
#2. Rounded Corner CSS3
#3. Warna Gradient CSS3
#4. Efek Bayangan CSS3
#5. Transform CSS3
#6. Transition CSS3
#7. Animasi CSS3
#8. Tutorial CSS3 Lainnya

Produk

Source Code Website Reservasi Kamar Hotel Dengan PHP dan MySQLi Rp 200,000
Source Code Aplikasi Pengajuan Cuti Karyawan Berbasis Website Rp 200,000
Source Code Toko Sport PHP dan MySQLi Rp 200,000
Source Code Sistem Informasi Kuesioner Berbasis Web Rp 200,000

Tutorial Terbaru

Tutorial Python # 13 : Jenis Operator Pada Python September 24, 2022
Membuat Laporan PDF Dengan PHP dan MySQLi September 3, 2022
Export Data ke Excel Dengan PHP dan MySQLi August 23, 2022
Membuat Select Option Dinamis Menggunakan Ajax August 17, 2022
Membuat QR Code Dengan PHP August 3, 2022

Toko Kami

SOCIAL

Malas Ngoding

TUTORIAL MENARIK LAINNYA

CSS3

Membuat Bentuk Jajar Genjang Dengan CSS3

6 July 2020

Membuat Bentuk Jajar Genjang Dengan CSS3 – Halo teman-teman, selamat datang kembali di tutorial CSS3 Lengkap dari malasngoding.com. Apa kabar semua? mudah-mudahan teman-teman dan keluarga ...

Diki Alfarabi Hadi

CSS3 - Web Design5 February 2017

Cara Membuat Sliding Menu Dengan CSS3 dan jQuery – Halo web designer. selamat datang di tutorial cara membuat slide menu di www.malasngoding.com. pada tutorial ini ...

Diki Alfarabi Hadi

CSS3 - Web Design

Cara Membuat Animasi Preloader Dengan CSS3

9 April 2016

Cara Membuat Animasi Preloader Dengan CSS3 Cara Membuat Animasi Preloader Dengan CSS3 – Terima kasih sebelumnya saya ucapkan kepada teman-teman yang sudah membaca tutorial-turoial pemrograman ...

Diki Alfarabi Hadi

CSS - CSS3

Cara Mengganti Warna Placeholder Dengan CSS Cara Mengganti Warna Placeholder Dengan CSS – apa kabar teman-teman sekalian. hehe.. semoga sehat selalu ya. bertemu lagi lewat ... Border radius css untuk apa?

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.

Apa yang dimaksud dengan Border CSS?

Border pada CSS digunakan untuk memberikan garis pada elemen HTML. Anda bisa memilih macam-macam style garis dengan properti border-style , bisa juga mengatur ketebalan dengan properti border-width dan memberikan warna pada border itu sendiri dengan properti border-color .