Home » Tutorial » CSS » CSS Borders: Panduan Lengkap Styling Border
CSS

CSS Borders: Panduan Lengkap Styling Border

  • Minggu, 19 Oktober 2025
  • Dibaca 70x views
CSS Borders: Panduan Lengkap Styling Border CSS Borders: Panduan Lengkap Styling Border

Hai kawan Maya! Border adalah salah satu properti CSS yang paling sering dipakai untuk membuat design yang clean dan terstruktur. Dari garis simple sampai rounded corners yang modern, semuanya bisa dilakukan dengan CSS borders!

Di artikel ini kita akan belajar semua tentang border – dari basic sampai advanced tricks. Mari kita mulai!

CSS Border Properties

Ada 3 properti utama untuk border:

  1. border-width – Ketebalan border
  2. border-style – Jenis garis border
  3. border-color – Warna border

Plus bonus:

  • border-radius – Rounded corners
  • border – Shorthand property

1. Border Style (Wajib!)

Property paling penting adalah border-style. Tanpa ini, border tidak akan muncul!

Semua Border Styles

/* None - no border */
.none {
    border-style: none;
}

/* Solid - garis padat */
.solid {
    border-style: solid;
    border-width: 3px;
    border-color: black;
}

/* Dotted - titik-titik */
.dotted {
    border-style: dotted;
    border-width: 3px;
    border-color: blue;
}

/* Dashed - garis putus-putus */
.dashed {
    border-style: dashed;
    border-width: 3px;
    border-color: red;
}

/* Double - garis ganda */
.double {
    border-style: double;
    border-width: 5px;
    border-color: green;
}

/* Groove - efek 3D groove */
.groove {
    border-style: groove;
    border-width: 5px;
    border-color: #888;
}

/* Ridge - efek 3D ridge */
.ridge {
    border-style: ridge;
    border-width: 5px;
    border-color: #888;
}

/* Inset - efek 3D inset */
.inset {
    border-style: inset;
    border-width: 5px;
    border-color: #888;
}

/* Outset - efek 3D outset */
.outset {
    border-style: outset;
    border-width: 5px;
    border-color: #888;
}

/* Hidden - sama seperti none */
.hidden {
    border-style: hidden;
}

Multiple Styles untuk Each Side

.mixed-border {
    /* top right bottom left */
    border-style: solid dashed dotted double;
    border-width: 3px;
    border-color: black;
}

/* 2 values */
.two-values {
    border-style: solid dashed;
    /* top+bottom = solid, left+right = dashed */
}

/* 3 values */
.three-values {
    border-style: solid dashed dotted;
    /* top = solid, left+right = dashed, bottom = dotted */
}

2. Border Width

Mengontrol ketebalan border.

/* Keyword values */
.thin {
    border-style: solid;
    border-width: thin;  /* ~1px */
}

.medium {
    border-style: solid;
    border-width: medium; /* ~3px - default */
}

.thick {
    border-style: solid;
    border-width: thick;  /* ~5px */
}

/* Specific values */
.custom {
    border-style: solid;
    border-width: 10px;
}

Different Width per Side

.box {
    border-style: solid;
    
    /* Individual sides */
    border-top-width: 5px;
    border-right-width: 10px;
    border-bottom-width: 3px;
    border-left-width: 7px;
}

/* Or shorthand - top right bottom left */
.box-shorthand {
    border-style: solid;
    border-width: 5px 10px 3px 7px;
}

3. Border Color

Set warna border.

/* Color names */
.red-border {
    border-style: solid;
    border-width: 3px;
    border-color: red;
}

/* HEX */
.hex-border {
    border-style: solid;
    border-width: 3px;
    border-color: #3498db;
}

/* RGB */
.rgb-border {
    border-style: solid;
    border-width: 3px;
    border-color: rgb(52, 152, 219);
}

/* RGBA dengan transparency */
.rgba-border {
    border-style: solid;
    border-width: 3px;
    border-color: rgba(52, 152, 219, 0.5);
}

Different Colors per Side

.colorful {
    border-style: solid;
    border-width: 5px;
    
    /* top right bottom left */
    border-color: red blue green yellow;
}

/* Or individual */
.individual {
    border-style: solid;
    border-width: 5px;
    border-top-color: red;
    border-right-color: blue;
    border-bottom-color: green;
    border-left-color: yellow;
}

4. Border Shorthand – Super Efisien!

Gabungkan width, style, dan color jadi satu!

Basic Syntax

border: [width] [style] [color];

Contoh Praktis

/* Simple */
.box {
    border: 3px solid black;
}

/* Sama dengan: */
.box-long {
    border-width: 3px;
    border-style: solid;
    border-color: black;
}

/* More examples */
.card {
    border: 2px dashed #e74c3c;
}

.button {
    border: 1px solid rgba(0, 0, 0, 0.1);
}

Individual Side Shorthand

.header {
    /* Top border only */
    border-top: 3px solid blue;
}

.footer {
    /* Bottom border only */
    border-bottom: 2px dashed red;
}

.sidebar {
    /* Left border */
    border-left: 5px solid green;
    
    /* Right border */
    border-right: 1px dotted gray;
}

Combining Sides

.card {
    /* Different border for each side */
    border-top: 3px solid #3498db;
    border-bottom: 1px solid #ddd;
    border-left: none;
    border-right: none;
}

5. Border Radius – Rounded Corners!

Property favorit semua orang untuk rounded corners modern!

/* All corners same */
.rounded-box {
    border: 2px solid #3498db;
    border-radius: 10px;
}

/* Perfect circle (50%) */
.circle {
    width: 100px;
    height: 100px;
    border: 2px solid red;
    border-radius: 50%;
}

/* Pill shape */
.pill {
    border: 2px solid green;
    border-radius: 25px;
    padding: 10px 20px;
}

Individual Corners

.custom-corners {
    border: 2px solid black;
    
    /* Individual corners */
    border-top-left-radius: 10px;
    border-top-right-radius: 20px;
    border-bottom-right-radius: 30px;
    border-bottom-left-radius: 40px;
}

/* Shorthand - top-left top-right bottom-right bottom-left */
.shorthand {
    border: 2px solid black;
    border-radius: 10px 20px 30px 40px;
}

Common Patterns

/* Rounded top only */
.card-header {
    border: 2px solid #ddd;
    border-radius: 10px 10px 0 0;
}

/* Rounded bottom only */
.card-footer {
    border: 2px solid #ddd;
    border-radius: 0 0 10px 10px;
}

/* Rounded left only */
.badge {
    border: 2px solid orange;
    border-radius: 10px 0 0 10px;
}

Praktis: Card Design

.card {
    /* Border setup */
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    
    /* Other styling */
    padding: 20px;
    background-color: white;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.card:hover {
    border-color: #3498db;
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}

Praktis: Button Styles

.btn-primary {
    border: 2px solid #3498db;
    border-radius: 5px;
    background-color: #3498db;
    color: white;
    padding: 10px 20px;
}

.btn-outline {
    border: 2px solid #3498db;
    border-radius: 5px;
    background-color: transparent;
    color: #3498db;
    padding: 10px 20px;
}

.btn-outline:hover {
    background-color: #3498db;
    color: white;
}

Praktis: Underline Effect

.section-title {
    border-bottom: 3px solid #3498db;
    padding-bottom: 10px;
    margin-bottom: 20px;
}

.nav-link {
    border-bottom: 2px solid transparent;
    padding-bottom: 5px;
}

.nav-link:hover {
    border-bottom-color: #3498db;
}

Border Image – Advanced!

CSS juga support border dengan gambar!

.gradient-border {
    border: 5px solid;
    border-image: linear-gradient(45deg, #3498db, #e74c3c) 1;
}

.image-border {
    border: 10px solid;
    border-image: url('border-pattern.png') 30 round;
}

Note: border-radius tidak bekerja dengan border-image!

Border vs Outline

Border vs Outline – apa bedanya?

/* Border - part of box model, takes space */
.with-border {
    border: 3px solid red;
    /* Menambah ukuran total element */
}

/* Outline - outside box model, no space */
.with-outline {
    outline: 3px solid blue;
    /* Tidak menambah ukuran element */
}

Outline Properties

.focus-state {
    outline: 2px solid #3498db;
    outline-offset: 2px; /* Jarak dari element */
}

/* Remove default outline */
button:focus {
    outline: none; /* ❌ Hati-hati! Bad for accessibility */
}

/* Better approach */
button:focus {
    outline: 2px solid #3498db;
    outline-offset: 2px;
}

Box Shadow – Bonus Effect

Kombinasi border dengan shadow untuk efek depth!

.card {
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.elevated {
    border: none;
    border-radius: 12px;
    box-shadow: 
        0 4px 6px rgba(0,0,0,0.1),
        0 2px 4px rgba(0,0,0,0.06);
}

Responsive Borders

.box {
    border: 2px solid #3498db;
    border-radius: 8px;
}

@media (max-width: 768px) {
    .box {
        border-width: 1px;
        border-radius: 4px;
    }
}

Tips & Tricks

1. Border untuk Debugging Layout

/* Quick debug - lihat structure */
* {
    border: 1px solid red !important;
}

/* Or specific element */
.debug {
    border: 2px solid lime;
}

2. Triangle dengan Border

.triangle {
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 100px solid #3498db;
}

3. Divider Lines

/* Horizontal divider */
.divider {
    border-top: 1px solid #ddd;
    margin: 20px 0;
}

/* Vertical divider */
.vertical-divider {
    border-left: 1px solid #ddd;
    height: 100%;
}

4. Gradient Border Trick

.gradient-border {
    border: 5px solid transparent;
    border-radius: 10px;
    background: 
        linear-gradient(white, white) padding-box,
        linear-gradient(45deg, #3498db, #e74c3c) border-box;
}

Browser Support

Semua border properties punya support sempurna di semua modern browsers!

  • ✅ Chrome, Firefox, Safari, Edge
  • ✅ Mobile browsers
  • ⚠️ IE11 support basic borders (no border-image)

Common Mistakes

❌ Lupa border-style

/* SALAH - tidak muncul */
.box {
    border-width: 3px;
    border-color: red;
    /* Lupa border-style! */
}

/* BENAR */
.box {
    border: 3px solid red;
}

❌ Salah Order di Shorthand

/* SALAH */
.box {
    border: red 3px solid; /* Wrong order */
}

/* BENAR */
.box {
    border: 3px solid red;
    /* width style color */
}

Kesimpulan

CSS Borders sangat versatile! Key points:

  1. border-style – Wajib ada (solid, dashed, dotted, dll)
  2. border-width – Ketebalan (thin, medium, thick, atau px)
  3. border-color – Warna (nama, hex, rgb, rgba)
  4. border shorthand – Efisien: border: width style color
  5. border-radius – Rounded corners modern
  6. Individual sides – Kontrol per sisi (top, right, bottom, left)
  7. Combine dengan shadows – Untuk depth effect

Dengan menguasai borders, kawan Maya bisa create design yang clean, modern, dan professional! 🎨

Ditulis oleh: Maya
Maya
Maya adalah tokoh hayalan, hanya tampaknya ada, tetapi nyatanya tidak ada, tokoh Maya dibangun untuk lebih mendekatkan karyamaya pada kalian.
| Website

Prev Post
CSS Backgrounds: Panduan Lengkap Styling Background
CSS Backgrounds: Panduan Lengkap Styling Background
Next Post
CSS Margins: Panduan Lengkap Spacing di Luar Element
CSS Margins: Panduan Lengkap Spacing di Luar Element

ads by Google