CSS Part 5 : CARA PENGGUNAAN BORDER DAN MACAM-MACAM BORDER

PENGERTIAN BORDER DAN MACAM-MACAM BORDER


ASSALAMUALAIKUM wr wb.

hallo,teman-teman terima kasih telah mengunjungi blog ini.
kali ini saya akan membahas tentang border apa teman-teman sudah tau apa itu border dan cara penggunaannya kalau belum tau berikut penjelasannya.



1.PENGERTIAN BORDER.
menampilkan sebuah element dengan lebih menarik yaitu dengan memberikan tampilan garis di sekelilingnya element.

2.MAKSUD DAN TUJAUAN.
   supaya lebih memahami css border dan macam-macam border.
3.BAHAN DAN ALAT.
   -laptop/pc
   -sublime text/notepad
   -web browser
4.MATERI TENTANG BORDER
       CSS memberikan kita kemampuan penuh untuk mengatur bagaimana penampilan dari perbatasan disekeliling  sebuah elemen, sehingga kita dapat dengan mudah meningkatkan keindahan visual dari elemen tersebut.


Untuk lebih jelasnya, kita mari kita lihat langsung properti CSS yang berhubungan dengan hal ini!
Properti yang digunakan dalam CSS Background antara lain :

  • border-style
  • border-width
  • border-color
  • border-radius

berikut penjelasan diatas: 
1.border-style.
Properti untuk menentukan jenis perbatasan apa yang akan ditampilkan

border-style dibagi menjadi beberapa bagian dibawah ini bagian-bagian border-style:
dotted = digunakan untuk garis bertitik-titik.
Dashed = digunakan untuk garis putus-putus.
Solid  = digunakan untuk garis yang solid.
Double = digunakan untuk garis ganda.
Groove = digunakan untuk garis berlekuk 3D.
Ridge  = digunakan untuk garis bergerigi 3D.
Inset  = digunakan untuk garis inset 3D.
Outset = digunakan untuk garis awal.
None   = mendefinisikan ada garis.
Hidden = digunakan untuk garis yang tersembunyi.

Berikut contoh penggunaan tag diatas:
1.border dotted.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
    <title></title>
<style>
p{
    border-style: dotted;
}
</style>
</head>
<body>
<p>
<br>border menampilkan sebuah element dengan lebih menarik</br>
<br>yaitu dengan memberikan tampilan garis di sekelilingnya element.</br></p>
</body>
</html>
ini hasilnya dari script diatas:


2.border dashed

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
    <title></title>
<style>
p{
    border-style: dashed;
}
</style>
</head>
<body>
<p>
<br>border menampilkan sebuah element dengan lebih menarik</br>
<br>yaitu dengan memberikan tampilan garis di sekelilingnya element.</br></p>
</body>
</html>

ini hasilnya dari script diatas:


3.border solid

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
    <title></title>
<style>
p{
    border-style: solid;
}
</style>
</head>
<body>
<p>
<br>border menampilkan sebuah element dengan lebih menarik</br>
<br>yaitu dengan memberikan tampilan garis di sekelilingnya element.</br></p>
</body>
</html>
ini hasil dari script diatas:

untuk lebih lengkap silahkan klik link dibawah ini:

2.border-width
digunakan untuk mengatur lebar/ketebalan bisa menggunakan pixel(px) atau bisa menggunakan salah satu ukuran yang biasa digunakan dalam css yaitu thin,medium,atau thick(tipis,sedang,atau tebal).

Berikut contoh border-width.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
    <title></title>
<style>
p{
    border-width: 30px;
    border-style: groove;
}
</style>
</head>
<body>
<p>
<br>border menampilkan sebuah element dengan lebih menarik</br>
<br>yaitu dengan memberikan tampilan garis di sekelilingnya element.</br></p>
</body>
</html>

dibawah ini contoh dari script diatas:


3.border-color
border bisa diatur warnanya.untuk pengaturan warna suatu border bisa menggunakan nama suatu warna dalam bahasa inggris atau bisa menggunakan RGB misalnya,rgb(54,231,0) atau HEX misalnya,#537ae2

berikut contoh penggunaan dari border-color
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
    <title></title>
<style>
p{
    border-width: 30px;
    border-style: groove;
    border-color: #ea5437;
}
</style>
</head>
<body>
<p>
<br>border menampilkan sebuah element dengan lebih menarik</br>
<br>yaitu dengan memberikan tampilan garis di sekelilingnya element.</br></p>
</body>
</html>

dibawah ini hasil dari script diatas:


4.border-radius
border radius digunakan untuk menambah batas bulat untuk elemen.

Berikut contoh penggunaan dari script border-radius
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
    <title></title>
<style>
p{
    border-width: 30px;
    border-style: groove;
    border-color: #ea5437;
    border-radius: 34px;
}
</style>
</head>
<body>
<p>
<br>border menampilkan sebuah element dengan lebih menarik</br>
<br>yaitu dengan memberikan tampilan garis di sekelilingnya element.</br></p>
</body>
</html>

dibawah ini hasil dari script diatas:

sekian dari artikel ini semoga bermanfaat.

REFERENSI:

    WASSALAMUALAIKUM wr wb.

Komentar

Posting Komentar

Postingan populer dari blog ini

how to upgrade php5.6 ke php 7.0

Gambar
UPGRADE PHP5.6 KE PHP7.0 ASSALAMUALAIKUM wr wb.     pada artikel kali ini saya akan membahas tentang bagaimana mengupgrade php5.6 ke php7.0 1.PENGERTIAN.     php yaitu bahasa pemrograman yang digunakan secara luas untuk penanganan pembuatan dan pengembangan sebuah situs web dan bisa digunakan bersamaan dengan HTML.  2.MAKSUD DAN TUJUAN.    untuk mengetahui fitur apa saja yang baru dari php7 dibandingan dengan php sebelumya. 3.ALAT DAN BAHAN. - laptop/komputer yang terinstall os linux. -koneksi internet.; -web browser. 4.WAKTU PELAKSANAAN.    sekitar kurang lebih 15 menit tergantung koneksi internet. 5.PEMBAHASAN.     kelebihan dan kekurangan php 1.kelebihan.             -Bisa membuat Web menjadi Dinamis.     -PHP bersifat Open Source yang berarti dapat digunakan oleh siapa saja secara gratis.     -Program yang dibuat dengan PHP bisa dijalankan oleh Semua Sistem Operasi karena PHP berjalan secara Web Base yag artinya semua Sistem Oper
Terus membaca

CSS Part 12: FONT CSS

Gambar
FONT CSS ASSALAMUALAIKUM wr wb.     apa kabar teman teman kali ini saya akan membahas tentang macam macam font teman teman yang pernah menggunakan ms word pasti pernah menggunakan jenis font apa tapi saya tidak membahas tentang ms word tapi font yang ada di css berikut artikel yang membahas tentang font. 1.Pengertian CSS Font.     metode untuk mengatur huruf pada elemen tag html. 2.MAKSUD dan TUJUAN.   untuk mengetahui cara penggunaan font. 3.BAHAN dan ALAT.  - laptop/pc  -web browser contohnya seperti mozilla fire fox atau yang lain  -memiliki aplikasi seperti sublime text/notepad  4.Materi CSS memberikan kita kemampuan penuh untuk mengatur jenis huruf elemen pada tag HTML. properti CSS yang berhubungan dengan yang digunakan dalam CSS font antara lain :         1.font family     2.font style     3.font size     4.font weight     5.font variant berikut contoh penerapan pada tag font diatas: 1.font family.     adalah tag yang digunakan untuk mengatur jenis pada h
Terus membaca

MENGANTI TAMPILAN THEME PADA WORDPRESS

Gambar
WORDPRESS ASSALAMUALAIKUM wr wb.    pada kesempatan kali ini saya akan menjelaskan bagaimana menganti tampilan theme pada wordpress. 1.PENGERTIAN.         adalah sebuah aplikasi sumber terbuka (open source) yang sangat populer digunakan sebagai mesin blog (blog engine). 2.MAKSUD DAN TUJUAN.        untuk bisa menganti tampilan wordpress sesuka kita. 3.ALAT DAN BAHAN.  -laptop/komputer.  -wordpress.  -web browser. 4.LAMA PELAKSANAAN.    sekitar 5 menit. 5.PELAKSANAAN.     1.buka web browser dan masuk ke wordpress. 2.pilih tampilan dan kilk tambahkan tema baru. 3.setelah pilih tema yang anda sukai dan klik install jika sudah klik aftifkan. 4.berikut hasil tampilan setelah diganti tampilan.     sekian dari artikel kali ini terima kasih telah berkunjung. WASSALAMUALAIKUM wr wb.
Terus membaca