Apa yang dimaksud dengan border css?

Pada kesempatan kali ini saya akan menjelaskan fungsi property border di css. Mungkin teman-teman sudah banyak yang tahu apa itu border dan bagaimana penerapan nya di css. Border adalah garis tepi suatu element html yang di atur dengan menggunakan property css dengan ketebalan, jenis garis serta warna garis tersebut yang dapat di atur dengan mudah.

Table of Contents Show

Mengubah Border Style
Mengatur Ukuran Border CSS
Memberi warna pada border
Cara cepat memanipulasi border dengan CSS
TUTORIAL MENARIK LAINNYA
Membuat Bentuk Segitiga Dengan CSS
Membuat Lingkaran Dengan CSS
Membuat Template Web Responsive Dengan HTML dan CSS
Cara Membuat Text Di Tengah Dengan HTML dan CSS – Sebenarnya cara membuat text berada di tengah sudah pernah kita jelaskan di tutorial CSS dasar ... Apa yang dimaksud Border Style?
Apa itu border bottom?
Apa itu Border Radius?
Apa yang dimaksud dengan border color?

Border terbagi menjadi beberapa bagian, di antaranya:

Border adalah garis tepi atas, kanan, bawah, dan kiri dari suatu elemen, dari property tersebut yaitu dengan penggunaan border-top, border kanan, border bawah, dan border kiri cukup dengan menggunakan property saja, namun untuk yang lebih spesifik dapat di gunakan property border tersebut sesuai dengan keinginan teman-teman.
border-top adalah garis tepi suatu elemen atas
border-right adalah garis tepi suatu elemen kanan
border-bottom adalah garis tepi suatu elemen bawah
border-left adalah garis tepi suatu elemen sebelah kiri

Dengan penulisan seperti berikut:

border: <line-width> || <line-style> || <color>

line-width adalah nilai untuk ketebalan garis elemen pada html tersebut

line-style adalah nilai untuk jenis garis elemen pada html tersebut, di sini tersedia beberapa pilihan untuk jenia tersebut

line-width adalah nilai untuk warna garis elemen pada html tersebut.

Untuk penulisan property dari border tersebut bisa digunakan dengan satu argumen, dua argumen atau tiga argument sebagai nilai yang di abaikan, seperti contoh di bawah ini:

Pada tutorial kali ini di www.malasngoding.com kita akan membahas tentang manipulasi border dengan menggunakan CSS . CSS memungkinkan kita untuk memanipulasi atau mengubah ukuran, warna, dan gaya atau bentuk pada border. Misalnya border yang berbentuk titik-titik, strip dan yang bermodel biasa saja .

untuk contoh mengubah border dengan CSS silahkan simak penjelasan berikut ini.

Mengubah Border Style

Pada CSS terdapat banyak gaya atau model untuk membuat garis. Ada yang berbentuk titik-titik, berbentuk garis yang putus-putus, garis ganda dan banyak lagi style/gaya yang bisa di gunakan pada garis dengan CSS . untuk membuat garis sekaligus memberikan value style yang kita inginkan kita bisa menggunakan property css border-style. silahkan perhatikan contoh di bawah ini.

index.html

<!DOCTYPE html>

<html>

<head>

<title>Border style CSS www.malasngoding.com</title>

</head>

<body>

Garis dengan gaya solid

Garis dengan gaya dotted

Garis dengan gaya dashed

Garis dengan gaya double

Garis dengan gaya groove

Garis dengan gaya inset

Garis dengan gaya outset

Garis dengan gaya ridge

</body>

</html>

style.css

#garis_1{

border-style:solid;

}

#garis_2{

border-style: dotted;

}

#garis_3{

border-style: dashed;

}

#garis_4{

border-style: double;

}

#garis_5{

border-style: groove;

}

#garis_6{

border-style: inset;

}

#garis_7{

border-style: outset;

}

#garis_8{

border-style: ridge;

}

Berikut adalah contoh border-style saat di jalankan pada browser

contoh border style css

Mengatur Ukuran Border CSS

Untuk mengatur ukuran pada border kita bisa menggunakan property css yaitu border-width.berikut ini adalah contoh cara penulisan property border-width untuk membuat ukuran garis.

index.html

<!DOCTYPE html>

<html>

<head>

<title>Border style CSS www.malasngoding.com</title>

</head>

<body>

Garis dengan gaya solid

Garis dengan gaya dotted

Garis dengan gaya dashed

Garis dengan gaya double

Garis dengan gaya groove

Garis dengan gaya inset

Garis dengan gaya outset

Garis dengan gaya ridge

</body>

</html>

style.css

#garis_1{

border-style:solid;

border-width: 5px;

}

#garis_2{

border-style: dotted;

border-width: 10px;

}

#garis_3{

border-style: dashed;

border-width: 3px;

}

#garis_4{

border-style: double;

border-width: 9px;

}

#garis_5{

border-style: groove;

border-width: 25px;

}

#garis_6{

border-style: inset;

border-width: 5px;

}

#garis_7{

border-style: outset;

border-width: 5px;

}

#garis_8{

border-style: ridge;

border-width: 50px;

}

dan perhatikan ukuran garis setelah kita mengaturnya dengan border-width.

mengatur ukuran garis dengan border-width

Memberi warna pada border

untuk memberikan warna pada garis gunakan property css yaitu border-color. berikut adalah contoh membuat warna pada garis menggunakan CSS.

index.html

<!DOCTYPE html>

<html>

<head>

<title>Border style CSS www.malasngoding.com</title>

</head>

<body>

Garis dengan gaya solid

Garis dengan gaya dotted

Garis dengan gaya dashed

Garis dengan gaya double

Garis dengan gaya groove

Garis dengan gaya inset

Garis dengan gaya outset

Garis dengan gaya ridge

</body>

</html>

style.css

#garis_1{

border-style:solid;

border-width: 5px;

}

#garis_2{

border-style: dotted;

border-width: 10px;

border-color:red;

}

#garis_3{

border-style: dashed;

border-width: 3px;

border-color:blue;

}

#garis_4{

border-style: double;

border-width: 9px;

border-color:green;

}

#garis_5{

border-style: groove;

border-width: 25px;

border-color:#12ff00;

}

#garis_6{

border-style: inset;

border-width: 5px;

border-color:#333333;

}

#garis_7{

border-style: outset;

border-width: 5px;

border-color:yellow;

}

#garis_8{

border-style: ridge;

border-width: 50px;

border-color: violet;

}

Belajar CSS Mengubah border dengan CSS

Cara cepat memanipulasi border dengan CSS

Cara untuk memanipulasi atau mengubah border dengan cepat menggunakan CSS kita bisa langsung menggunakan property css border. dan mengisi langsung value ukuran, jenis garis dan warna. untuk cara cepat memanipulasi border dengan css silahkan perhatikan contoh berikut ini.

index.html

<!DOCTYPE html>

<html>

<head>

<title>Border style CSS www.malasngoding.com</title>

</head>

<body>

Garis dengan gaya solid

Garis dengan gaya dotted

Garis dengan gaya dotted

</body>

</html>

style.css

#garis_1{

border:1px solid blue;

}

#garis_2{

border:10px dotted green;

}

#garis_3{

border:30px dashed #12ff00;

}

perhatikan pada contoh syntax css di atas. untuk mengubah border dengan cepat bisa langsung menyisipkan ukuran, jenis border dan warna yang di inginkan di dalam property border. Belajar CSS Mengubah border dengan CSS

border:1px solid blue;

contoh di atas berarti border yang di maksud berukuran 1px, dengan jenis border solid dan berwarna biru. maka hasilnya.

Belajar CSS Mengubah border dengan CSS

Dan berikut adalah beberapa property lain yang di gunakan untuk mengubah tampilan border dengan CSS.

border-bottom, Mengatur garis yang terletak di bawah.
border-bottom-color, Mengatur warna garis yang terletak di bawah.
border-bottom-style, Mengatur style garis yang terletak di bawah.
border-bottom-width, Mengatur ukuran garis yang terletak di bawah.
border-color, Mengatur warna garis.
border-left, Mengatur garis yang terletak di sebelah kiri.
border-left-color, Mengatur warna garis yang terletak di sebelah kiri.
border-left-style, Mengatur style garis yang terletak di sebelah kiri.
border-left-width, Mengatur ukuran garis yang terletak di sebelah kiri.
border-right, Mengatur garis yang terletak di sebelah kanan.
border-right-color, Mengatur warna garis yang terletak di sebelah kanan.
border-right-style, Mengatur style garis yang terletak di sebelah kanan.
border-right-width, Mengatur ukuran garis yang terletak di sebelah kanan.
border-style, Mengatur style garis.
border-top, Mengatur garis yang terletak di sebelah atas.
border-top-color, Mengatur warna garis yang terletak di sebelah atas.
border-top-style, Mengatur style garis yang terletak di sebelah atas.
border-top-width, Mengatur ukuran garis yang terletak di sebelah atas.
border-width, Mengatur ukuran garis.

Incoming search terms:

border pada css
cara membuat border css
cara mengubah ukuran border css
membuat border css
https://www malasngoding com/belajar-css-mengubah-border-dengan-css/
cara ngecilin border di php
membuat garis putus putus di css
border di css
belajar border css
cara ubah warna border di css

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 dotted css, border solid css, Cara cepat memanipulasi border dengan CSS, cara memberi warna pada border dengan css, cara Mengubah border dengan CSS, CSS Mengubah border dengan CSS, jenis border css, jenis-jenis border css, mempercantik garis di css, pengertian border css, tampilan border css

Tutorial CSS Dasar

#1. Pengenalan CSS
#2. Penulisan CSS
#3. Background CSS
#4. Margin dan Padding CSS
#5. Font CSS
#6. Link / Hyperlink CSS
#7. Format Text CSS
#8. Position CSS
#9. Border CSS
#10. List CSS
#11. Float CSS
#12. Tutorial CSS Lainnya

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

CSS

Membuat Bentuk Segitiga Dengan CSS

7 July 2020

Membuat Bentuk Segitiga Dengan CSS – Selamat datang kembali di tutorial css di malasngoding.com. beberapa waktu lalu ada beberapa teman-teman pembaca tutorial di malasngoding.com yang ...

Diki Alfarabi Hadi

CSS

Membuat Lingkaran Dengan CSS

25 September 2018

Membuat Lingkaran Dengan CSS Membuat Lingkaran Dengan CSS – Pada tutorial ini kita akan belajar membuat lingkaran atau nembuat bulat dengan menggunakan CSS. Memang mungkin ...

Diki Alfarabi Hadi

CSS - Web Design

Membuat Template Web Responsive Dengan HTML dan CSS

10 May 2017

Membuat Template Web Responsive Dengan HTML dan CSS – Pada tutorial ini kita akan membuat sebuah template web sederhana responsive dengan menggunakan HTML dan CSS. ...

Diki Alfarabi Hadi

CSS

Cara Membuat Text Di Tengah Dengan HTML dan CSS – Sebenarnya cara membuat text berada di tengah sudah pernah kita jelaskan di tutorial CSS dasar ... Apa yang dimaksud Border Style?

Properti Border-style Ini adalah properti singkatan untuk mengatur gaya garis untuk keempat sisi dari elemen border. Properti border-style dapat mengambil salah satu dari nilai berikut: none , hidden , dashed , dotted , double , groove , inset , outset , ridge dan solid. none: Menentukan tidak ada border.

Apa itu border bottom?

4.Border-bottom ,fungsinya untuk membuat style garis pinggir bagian bawah.

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.

Apa yang dimaksud dengan border color?

Border Color (Warna Border) Properti border-color digunakan untuk mengatur warna dari empat border. Warna dari border dapat diatur dengan menggunakan perintah: *nama – menggunakan nama dari warna, misalnya “red”.