{"id":55241,"date":"2025-06-06T08:38:00","date_gmt":"2025-06-06T01:38:00","guid":{"rendered":"https:\/\/www.rumahweb.com\/journal\/?p=55241"},"modified":"2026-02-16T10:28:25","modified_gmt":"2026-02-16T03:28:25","slug":"belajar-css-bagian-17","status":"publish","type":"post","link":"https:\/\/www.rumahweb.com\/journal\/belajar-css-bagian-17\/","title":{"rendered":"Belajar CSS Bagian 17: Mengenal Properti CSS Border"},"content":{"rendered":"\n<p>Pernah melihat elemen pada website yang memiliki garis tepi yang rapi dan menarik? Garis tersebut bukan hanya sebagai pemanis tampilan, tapi juga bisa membantu memisahkan konten agar lebih mudah dibaca. Nah, untuk membuat efek tersebut, Anda bisa menggunakan CSS border. Dalam sesi belajar CSS bagian 17 ini, kita akan belajar lebih alamn tentang pengertian, fungsi, cara kerja hingga cara kerja css border.<\/p>\n\n\n\n<p>Sebelum memulai belajar css border, pastikan bahwa Anda telah membaca artikel sebelumnya tentang properti css yang bisa dilihat pada link <a href=\"https:\/\/www.rumahweb.com\/journal\/belajar-css\/#Kelas_Belajar_CSS\" target=\"_blank\" rel=\"noopener\" title=\"kelas belajar css\">berikut<\/a>. <\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Apa itu Properti CSS Border<\/h2>\n\n\n\n<p>CSS border adalah properti CSS yang digunakan untuk menampilkan sebuah garis dalam setiap elemen HTML seperti garis tepi , garis pembatas, atau bingkai. Border ini berguna untuk menampilkan batas antar elemen HTML lain, dapat menambahkan estetika tampilan website, atau menampilkan bagian elemen tertentu dari halaman web.<\/p>\n\n\n\n<p>Properti CSS border menyediakan berbagai jenis gaya border seperti solid, dashed, dotted, double, dan lainnya, serta memungkinkan pengaturan setiap sisi elemen secara terpisah menggunakan <code>border-top<\/code>, <code>border-right<\/code>, <code>border-bottom<\/code>, dan <code>border-left<\/code>. Dengan kombinasi yang tepat, border dapat membuat tampilan web menjadi lebih menarik dan terstruktur.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Fungsi Properti CSS Border<\/h2>\n\n\n\n<p>Properti CSS Border ini dapat digunakan untuk menampilkan garis untuk elemen HTML seperti teks, gambar, tombol, dan blok HTML pada konten lainnya sehingga elemen tersebut dapat terlihat lebih jelas, terpisah atau menonjol dengan elemen lainnya.<\/p>\n\n\n\n<p>CSS border sering digunakan untuk mempertegas kotak konten seperti tombol, gambar, atau kontak elemen lain dalam bentuk card yang menyorot bagian penting dalam sebuah halaman web.<\/p>\n\n\n\n<p>Selain itu dapat membantu dalam menyusun tata letak lebih rapi dan terorganisir serta meningkatkan pengalaman pengguna melalui tampilan yang mudah dipahami.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Cara Kerja<\/h2>\n\n\n\n<p>Dengan menggunakan properti CSS border, kita bisa mengatur:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Lebar garis (<em>thickness<\/em>),<\/li>\n\n\n\n<li>Gaya garis (<em>style<\/em>), dan<\/li>\n\n\n\n<li>Warna garis (<em>color<\/em>) dari tepi elemen.<\/li>\n<\/ul>\n\n\n\n<p>Contoh penulisan CSS border :<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>selector {\n  border: &#91;lebar] &#91;gaya] &#91;warna];\n}<\/code><\/pre>\n\n\n\n<p>Contoh penerapan ke script CSS:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>p {\n  border: 2px solid black;\n}<\/code><\/pre>\n\n\n\n<p>Dari kode CSS diatas pada tag p atau paragraf akan memiliki garis tepi berwarna hitam, tebal 2 piksel, dan bergaya solid (garis lurus penuh).<\/p>\n\n\n\n<p>Berikut <em>screenshoot<\/em>nya :<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2025\/05\/image-9.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"518\" src=\"https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2025\/05\/image-9-1024x518.png\" alt=\"border bingkai\" class=\"wp-image-55242\" srcset=\"https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2025\/05\/image-9-1024x518.png 1024w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2025\/05\/image-9-300x152.png 300w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2025\/05\/image-9-768x388.png 768w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2025\/05\/image-9-370x187.png 370w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2025\/05\/image-9-270x137.png 270w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2025\/05\/image-9-570x288.png 570w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2025\/05\/image-9-740x374.png 740w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2025\/05\/image-9.png 1062w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Properti border Lainnya (Spesifik per sisi):<\/h3>\n\n\n\n<p>Properti border dapat diatur lebih spesifik garis mana yang akan ditampilkan. Berikut adalah properti border lain yang dapat diterapkan.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>border-top untuk menambahkan garis di sebelah atas elemen<\/li>\n\n\n\n<li>border-right untuk menambahkan garis di sebelah kanan elemen<\/li>\n\n\n\n<li>border-bottom untuk menambahkan garis di sebelah bawah elemen<\/li>\n\n\n\n<li>border-left untuk menambahkan garis di sebelah kiri elemen<\/li>\n<\/ul>\n\n\n\n<p>Contoh penulisan :&nbsp;<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>p {\n  border-top: 2px solid red;\n  border-left: 4px dashed blue;\n}<\/code><\/pre>\n\n\n\n<p>Berikut <em>screenshoot <\/em>nya :<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2025\/05\/image-10.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"495\" src=\"https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2025\/05\/image-10-1024x495.png\" alt=\"border spesifik\" class=\"wp-image-55243\" srcset=\"https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2025\/05\/image-10-1024x495.png 1024w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2025\/05\/image-10-300x145.png 300w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2025\/05\/image-10-768x371.png 768w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2025\/05\/image-10-370x179.png 370w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2025\/05\/image-10-270x130.png 270w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2025\/05\/image-10-570x275.png 570w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2025\/05\/image-10-740x357.png 740w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2025\/05\/image-10.png 1058w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Properti Tambahan<\/h3>\n\n\n\n<p>Selain itu, properti border memiliki properti lain agar terlihat lebih rapi dan terstruktur, Berikut adalah properti tambahan lain yang dapat diterapkan, seperti:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>border-width \u2013 mengatur ketebalan border.<\/li>\n\n\n\n<li>border-style \u2013 mengatur gaya border.<\/li>\n\n\n\n<li>border-color \u2013 mengatur warna border.<\/li>\n\n\n\n<li>border-radius \u2013 membuat sudut border membulat.<\/li>\n<\/ul>\n\n\n\n<p>Contoh penulisan :&nbsp;<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>div {\n  border-color: red;\n  border-radius: 10px;\n}<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Contoh Implementasi dan penggunaan<\/h2>\n\n\n\n<p>Berikut adalah contoh <em>script <\/em>lengkap penggunaan properti CSS border yang telah diterapkan ke kode html.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;!DOCTYPE html&gt;\n&lt;html&gt;\n&lt;head&gt;\n    &lt;title&gt;Contoh CSS Border&lt;\/title&gt;\n    &lt;style&gt;\n    .container {\n        display: flex;\n        justify-content: center;\n    }\n    .container div {\n        margin: 10px;\n        padding: 10px;\n        background-color: #ffffff;\n        border: 1px solid #dadada;\n        border-radius: 10px;\n        width: 200px;\n        height: 300px;\n    }\n    body {\n        background-color: aliceblue;\n    }\n    &lt;\/style&gt;\n&lt;\/head&gt;\n\n&lt;body&gt;\n    &lt;div class=\"container\"&gt;\n        &lt;div class=\"box\"&gt;Box Satu&lt;\/div&gt;\n        &lt;div class=\"box\"&gt;Box Dua&lt;\/div&gt;\n        &lt;div class=\"box\"&gt;Box Tiga&lt;\/div&gt;\n        &lt;div class=\"box\"&gt;Box Empat&lt;\/div&gt;\n    &lt;\/div&gt;\n&lt;\/body&gt;\n&lt;\/html&gt;<\/code><\/pre>\n\n\n\n<p>Dan jika diakses melalui <em>browser<\/em>, maka akan tampil seperti gambar berikut:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2025\/05\/image-11.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"681\" src=\"https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2025\/05\/image-11-1024x681.png\" alt=\"penerapan css border - belajar css\" class=\"wp-image-55244\" srcset=\"https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2025\/05\/image-11-1024x681.png 1024w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2025\/05\/image-11-300x200.png 300w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2025\/05\/image-11-768x511.png 768w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2025\/05\/image-11-370x246.png 370w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2025\/05\/image-11-270x180.png 270w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2025\/05\/image-11-570x379.png 570w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2025\/05\/image-11-740x492.png 740w, https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2025\/05\/image-11.png 1324w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Kesimpulan<\/h2>\n\n\n\n<p>CSS border dapat digunakan untuk memberikan batas garis pada elemen HTML. Properti ini sangat berguna untuk meningkatkan tampilan desain dan menampilkan bagian tertentu sebagai pembatas dengan elemen HTML lain dari halaman web, seperti kotak peringatan, tombol, gambar, atau bagian penting lainnya.<\/p>\n\n\n\n<p>Demikian artikel kami tentang mengenal css border pada sesi belajar CSS bagian 17. Ikuti terus sesi belajar CSS dari Rumahweb, untuk meningkatkan skill web desain Anda. Semoga bermanfaat.<\/p>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Pernah melihat elemen pada website yang memiliki garis tepi yang rapi dan menarik? Garis tersebut bukan hanya sebagai pemanis tampilan, tapi juga bisa membantu memisahkan konten agar lebih mudah dibaca. Nah, untuk membuat efek tersebut, Anda bisa menggunakan CSS border. Dalam sesi belajar CSS bagian 17 ini, kita akan belajar lebih alamn tentang pengertian, fungsi, [&hellip;]<\/p>\n","protected":false},"author":353,"featured_media":55381,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2}},"categories":[5],"tags":[1752,1751,2186],"class_list":{"0":"post-55241","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-web-design","8":"tag-belajar-css","9":"tag-css","10":"tag-tutorial-css"},"aioseo_notices":[],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/www.rumahweb.com\/journal\/wp-content\/uploads\/2025\/05\/banner-mengenal-properti-css-border.png","jetpack_shortlink":"https:\/\/wp.me\/p8n3G7-emZ","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/posts\/55241","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/users\/353"}],"replies":[{"embeddable":true,"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/comments?post=55241"}],"version-history":[{"count":1,"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/posts\/55241\/revisions"}],"predecessor-version":[{"id":61946,"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/posts\/55241\/revisions\/61946"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/media\/55381"}],"wp:attachment":[{"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/media?parent=55241"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/categories?post=55241"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/tags?post=55241"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}