Anda di halaman 1dari 11

MEMBUAT BORDER (GARIS TEPI)

Oleh: Ade Sutarya, S.Kom

A. Membuat Border dengan CSS


Sebagai langkah awal pembelajaran agar lebih efektif dan memudahkan dalam proses pemahaman, buatlah folder dengan
nama Border.

1. Membuat sudut lengkung (border-radius)


Untuk membuat sudut lengkung caranya adalah dengan menggunakan perintah border-radius, artinya adalah garis
dengan sudut lengkung. Dan hal ini tidak dapat dibuat dengan menggunakan HTML tetapi dengan adanya CSS
masalah ini dapat diselesaikan.

a. Ketikan script css di bawah ini kemudian simpan dengan nama kotak.css

1 @charset "utf-8";
2 /* CSS Document */
3
4 #kotak {
5 width: 100px;
6 height: 50px;
7 background-color:#0C3;
8 border: 1px solid #333;
9 border-radius: 8px 8px 8px 8px;
10 }

b. Simpan file kotak.css didalam folder Border.


c. Kemudian ketik script PHP berikut ini dan simpan dengan nama kotak.php

1 <link rel="stylesheet" type="text/css" href="kotak.css" />


2 <?php
3 echo'
4 <div id="kotak"> </div> ';
5 ?>

d. Simpan file kotak.php di dalam folder Border.


e. Berikut ini adalah hasilnya:
PENJELASAN :

Width = 100 px

A B

Height : 50 px
C D

border-radius : 8px 8px 8px 8px;

Sudut A

Sudut B

Keterangan : Sudut C

width artinya panjang kotak Sudut D

height artinya tinggi kotak


8px : pertama untuk sudut kanan atas (A)
8px : kedua untuk sudut kiri atas (B)
8px : ketiga untuk sudut kanan bawah (C)
8px : keempat untuk sudut kiri bawah (D)

Catatan :
Jika semua sudut bernilai sama, maka penulisan dapat disingkat seperti ini:
border-radius : 8px;

TUGAS INDIVIDU :
Buatlah script dari objek berikut ini, diskusikan bersama kelompokmu dan catat hasilnya pada buku tugas !

2. Membuat Garis Tepi


Ada beberapa tipe garis tepi, diantaranya:
a. Garis tepi untuk semua sisi
b. Garis tepi atas
c. Garis tepi bawah
d. Garis tepi kiri
e. Garis tepi kanan
Script untuk masing-masing garis tepi, sebagai berikut:
a. Garis Tepi Untuk Semua Sisi (border)
Untuk membuat garis tepi pada suatu halaman kita harus paham terlebih dahulu mengenai sisi halaman.
Terdapat empat sisi halaman yaitu sisi atas, sisi bawah, sisi kiri dan sisi kanan. Berikut perintah untuk memberi
garis pada sisi halaman.

border : 2px solid #000;

Keterangan :
border : adalah properti
2px : adalah ukuran ketebalan garis sebesar 2 pixel
Solid : adalah jenis tipe garis
#000 : adalah garis berwarna hitam (untuk kode warna lihat pada lampiran)

b. Garis Tepi Atas (border-top)


Ketikan script css di bawah ini kemudian simpan dengan nama bordertop.css

1 @charset "utf-8";
2 /* CSS Document */
3
4 #bordertop {
5 width:100px;
6 height: 50px;
7 background-color:#060;
8 border-top: 4px solid #003;
9 }

Simpan file bordertop.css didalam Border. Kemudian ketik script PHP berikut ini dan simpan dengan nama
bordertop.php

1 <link rel="stylesheet" type="text/css" href="bordertop.css" />


2 <?php
3 echo '<div id="bordertop"></div>';
4 ?>

Simpan file bordertop.php di dalam folder Boder. Berikut ini adalah hasilnya:

PENJELASAN :

Gambar di atas dibentuk dengan menggunakan border-top, ketebalan garis tepi atas sebesar 4px dengan type
garis solid dan warna garis biru tua, lebar (width) 100px dan tinggi (height) 50px, background warna hijau.
c. Garis Tepi Bawah (border-bottom)
Ketikan script css di bawah ini kemudian simpan dengan nama borderbottom.css pada folder Border.

1 @charset "utf-8";
2 /* CSS Document */
3
4 #borderbottom {
5 width: 100px;
6 height: 50px;
7 background-color:#096;
8 border-bottom: 4px solid #003;
9 }

Simpan file borderbottom.css didalam folder Boder. Kemudian ketik script PHP berikut ini dan simpan dengan
nama borderbottom.php.

1 <link rel="stylesheet" type="text/css" href="borderbottom.css">


2 <?php
3 echo '<div id="borderbottom"> </div>';
4 ?>

Simpan file borderbottom.php di dalam folder Boder. Berikut ini adalah hasilnya:

PENJELASAN :

Gambar di atas dibentuk dengan menggunakan border-bottom, ketebalan garis tepi bawah sebesar 4px dengan
type garis solid dan warna garis biru tua, lebar 100px dan tinggi 50px, background warna hijau.

d. Garis Tepi Kiri (border-left)


Ketikan script css di bawah ini kemudian simpan dengan nama borderleft.css

1 @charset "utf-8";
2 /* CSS Document */
3
4 #borderleft {
5 width: 100px;
6 height: 50px;
7 background-color:#093;
8 border-left: 4px solid #006;
9 }

Simpan file borderleft.css didalam folder Border. Kemudian ketik script PHP berikut ini dan simpan dengan
nama borderleft.php.
1 <link rel="stylesheet" type="text/css" href="borderleft.css" />
2 <?php
3 echo '<div id="borderleft"></div>';
4 ?>

Simpan file borderleft.php di dalam folder Border. Berikut ini adalah hasilnya:

PENJELASAN :

Gambar di atas dibentuk dengan menggunakan border-left ketebalan garis tepi kiri sebesar 4px dengan type
garis solid dan warna garis biru tua, lebar 100px dan tinggi 50px, background warna hijau.

e. Garis Tepi Kanan (border-right)


Ketikan script css di bawah ini kemudian simpan dengan nama borderrigth.css

1 @charset "utf-8";
2 /* CSS Document */
3
4 #borderright {
5 width: 100px;
6 height: 50px;
7 background-color:#093;
8 border-right: 4px solid #006;
9 }

Simpan file borderright.css didalam folder Boder. Kemudian ketik script PHP berikut ini dan simpan dengan
nama borderright.php.

1 <link rel="stylesheet" type="text/css" href="borderright.css"/>


2 <?php
3 echo '<div id="borderright"></div>';
4 ?>
Simpan file borderright.php di dalam folder Border. Berikut ini adalah hasilnya:

PENJELASAN :

Gambar di atas dibentuk dengan menggunakan border-right, ketebalan garis tepi kanan sebesar 4px dengan type
garis solid dan warna garis biru tua, lebar 100px dan tinggi 50px, background warna hijau.

3. Mengenal Jenis Border (garis)


Ada beberapa jenis border (garis) dan yang sering dipakai adalah type solid, namun terdapat beberapa jenis border
lainnya yang patut kita ketahui bersama, diantaranya :

Ketik script di bawah ini kemudian simpan dengan nama border.css

1 @charset "utf-8";
2 /* CSS Document */
3
4 #border1 {
5 width: 300px;
6 height: 100px;
7 background:#CCC;
8 border: 4px solid #000;
9 margin: 10px;
10 padding: 10px;
11 }
12
13 #border2 {
14 width: 300px;
15 height: 100px;
16 background:#CCC;
17 border: 4px dashed #000;
18 margin: 10px;
19 padding: 10px;
20 }
21
22 #border3 {
23 width: 300px;
24 height: 100px;
25 background:#CCC;
26 border: 4px dotted #000;
27 margin: 10px;
padding: 10px;
28
}
29
30
#border4 {
31
width: 300px;
32
height: 100px;
33
background:#CCC;
34
border: 4px double #000;
35
margin: 10px;
36 padding: 10px;
37 }
38
39 #border5 {
40 width: 300px;
41 height: 100px;
42 background:#CCC;
43 border: 4px groove #000;
44 margin: 10px;
45 padding: 10px;
46 }
47
48 #border6 {
49 width: 300px;
50 height: 100px;
51 background:#CCC;
52 border: 4px hidden #000;
53 margin: 10px;
54 padding: 10px;
55 }
56
57 #border7 {
58 width: 300px;
59 height: 100px;
60 background:#CCC;
61 border: 4px inset #000;
62 margin: 10px;
63 padding: 10px;
64 }
65
#border8 {
66
width: 300px;
67
height: 100px;
68
background:#CCC;
69
border: 4px none #000;
70
margin: 10px;
71
padding: 10px;
72
}
73
74
75 #border9 {
76 width: 300px;
77 height: 100px;
78 background:#CCC;
79 border: 4px outset #000;
80 margin: 10px;
81 padding: 10px;
82 }
83
84
85 #border10 {
86 width: 300px;
87 height: 100px;
88 background:#CCC;
89 border: 4px ridge #000;
80 margin: 10px;
100 padding: 10px;
101 }
102
103
104 #border11 {
105 width: 300px;
106 height: 100px;
107 background:#CCC;
108 border: 4px inherit #000;
109 margin: 10px;
110 padding: 10px;
111 }

Ketik script di bawah ini kemudian simpan dengan nama border.php

1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5 <link rel="stylesheet" type="text/css" href="border.css" />
6 <title>Border</title>
7 </head>
8
9 <body>
10 <div id="border1"> SOLID </div>
11 <div id="border2"> DASHED </div>
12 <div id="border3"> DOTTED </div>
13 <div id="border4"> DOUBLE </div>
14 <div id="border5"> GROOVE </div>
15 <div id="border6"> HIDDEN </div>
16 <div id="border7"> INSET </div>
17 <div id="border8"> NONE </div>
18 <div id="border9"> OUTSET </div>
19 <div id="border10"> RIDGE </div>
20 <div id="border11"> INHERIT </div>
21
22 </body>
23 </html>

Hasilnya seperti ini :

Hasil Type/Jenis Script

Solid border : 4px solid #000;

Dashed border : 4px dashed #000;

Dotted border : 4px dotted #000;

Double border : 4px double #000;

Groove border : 4px groove #000;

Hidden border : 4px hidden #000;

Inset border : 4px inset #000;

None border : 4px none #000;


Outset border : 4px outset #000;

Ridge border : 4px ridge #000;

Inherit border : 4px inherit #000;


MENGENAL MARGIN DAN PADDING

A. Margin dan Padding


Istilah margin pasti sudah sering kita dengar dalam pengetikan, ya margin identik dengan dengan batas pengetikan
yaitu batas dari sisi paling luar sebuah kertas sampai dengan batas tulisan. Lalu apa yang dimaksud dengan padding.
Perhatikan gambar di bawah ini. Buatlah folder dengan nama MarginPadding

Area Margin

Area Padding

border
Letak Tulisan

Jadi margin adalah jarak dari border menuju keluar dengan batas tertentu dengan satuannya adalah pixel atau percent.
Sedangkan padding adalah jarak dari border menuju kebagian dalam border dengan jarak tertentu dengan satuannya
adalah pixel atau percent.
Pengaturan margin dan padding dapat dilakukan di dalam CSS. Untuk lebih memahami antara margin dan padding
coba kerjakan latihan di bawah ini.

Ketik script css berikut ini dan simpan hasilnya dengan nama : styles.css simpan di dalam folder MarginPadding.

1 @charset "utf-8";
2 /* CSS Document */
3
4 #margin_padding {
5 width: 300px;
6 height:100px;
7 padding: 10px;
8 margin: 20px;
9 background:#999;
10 text-align:justify;
11 }

Ketik script berikut ini dan simpan hasilnya dengan nama : margin_padding.php dan simpan pada folder MarginPadding.

1 <!DOCTYPE html>
2 <html lang="ne">
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5 <link rel="stylesheet" type="text/css" href="styles.css">
6 <title>Margin Padding</title>
7 </head>
8
9 <body>
10 <div id="margin_padding"> Halaman ini dibuat dengan menggunakan margin dan padding </div>
11 <div id="margin_padding"> halaman ini dibuat dengan menggunakan margin dan padding </div>
12 </body>
13 </html>
Hasilnya seperti berikut :

Ada beberapa pengaturan margin, diantaranya :

margin-left : 20px; jarak margin pada sisi kiri sebesar 20 pixel


margin-right : 20px; jarak margin pada sisi kanan sebesar 20 pixel
margin-top : 20px; jarak margin pada sisi atas sebesar 20 pixel
margin-buttom : 20px; jarak margin pada sisi bawah sebesar 20 pixel

jika batas margin nilainya sama semua maka dapat ditulis menjadi :

margin : 20px; jarak semua margin adalah 20 pixel

sama halnya dengan padding juga memiliki beberapa pengaturan, diantaranya :

padding-left : 20px; jarak padding kiri sebesar 20 pixel


padding-right : 20px; jarak padding kiri sebesar 20 pixel
padding-top: 20px; jarak padding kiri sebesar 20 pixel
padding-button : 20px; jarak padding kiri sebesar 20 pixel

jika batas padding nilainya sama semua maka dapat ditulis menjadi :

padding : 20px; jarak semua padding adalah 20 pixel

Catatan :
Perhatikan pada penulisan file css, pada bagian selector di awali dengan tanda hastag (#), yaitu #margin_padding. Maka
pada metode pemanggilan menggunakan tag <div id=”margin_padding”> … </div>.