📘 Lesson  ·  Lesson 18

Border

Border

The Three Border Parts

.box {
    border-width: 2px;      /* how thick */
    border-style: solid;    /* what kind of line */
    border-color: navy;     /* what color */
}
A box with a 2px solid navy border
A border is the line around an element (the box model layer between padding and margin). It has three parts: width (thickness), style (solid, dashed, etc.), and color. All three are needed for a border to appear — importantly, border-style is required: without a style, no border shows even if you set width and color (the style defaults to "none"). This catches beginners: "why isn't my border showing?" — usually a missing style.

The Border Shorthand — one line

/* Instead of three lines: */
border-width: 2px;
border-style: solid;
border-color: navy;

/* Combine into one: */
border: 2px solid navy;
        │    │     │
        width style color
The border shorthand is one of the most-used lines in all of CSS: border: 2px solid navy — width, style, colour, in that order. This is how borders are written 99% of the time; you'll rarely use the three separate properties. The order is flexible in practice, but width-style-colour is the standard convention everyone follows. Simple, compact, everywhere.

Border Styles — the line types

border: 2px solid navy;    /* ──────── a continuous line */
border: 2px dashed navy;   /* ─ ─ ─ ─  a dashed line */
border: 2px dotted navy;   /* ········  a dotted line */
border: 4px double navy;   /* ════════  two parallel lines */
dashed
dotted

The style value controls the line's appearance: solid (by far the most common), dashed, dotted, double, groove, ridge. For real designs, solid dominates — the others are occasional accents (dashed for "drop files here" zones, dotted for subtle dividers). Note none and hidden remove a border. Keep it simple: solid handles almost everything.

Individual Sides — border on one edge

border-bottom: 2px solid #ddd;    /* only the bottom edge */
border-left: 4px solid navy;      /* only the left edge (accent bar) */
You can apply a border to just one side with border-top, border-right, border-bottom, border-left. Two very common real uses: border-bottom alone creates clean underlines for table rows or headings (no heavy box), and border-left makes the coloured accent bar you see on quote blocks and note cards — in fact, the note cards in this very tutorial use a coloured left border. One-sided borders are a subtle, professional design touch.

border-radius — Rounded Corners

.card { border-radius: 8px; }       /* gently rounded corners */
.button { border-radius: 25px; }    /* pill-shaped button */
.avatar { border-radius: 50%; }     /* a perfect circle! */
rounded 12px
50%
border-radius rounds an element's corners — and it's everywhere in modern design. A small value (8px) gives cards and buttons that soft, friendly modern look; a large value makes pill-shaped buttons. The magic trick: border-radius: 50% on a square element makes a perfect circle — this is exactly how round profile pictures/avatars are made (a square image + 50% radius). You don't even need a visible border for border-radius to work; it rounds the element's background and corners regardless. One of the most satisfying, useful CSS properties.

Exam Corner

Q: What are the three parts of a border? width, style, color.

Q: Which part is required for a border to show? border-style (defaults to none).

Q: Write the border shorthand. border: 2px solid navy; (width style color).

Q: How do you make a perfect circle? border-radius: 50% on a square (equal width/height) element.

Q: How do you add a line under just the bottom of an element? border-bottom: 2px solid #ddd;

Border के तीन हिस्से

.box {
    border-width: 2px;      /* kitna mota */
    border-style: solid;    /* kaisi line */
    border-color: navy;     /* kaunsa color */
}
2px solid navy border wala box
Border element के चारों ओर की line है (padding और margin के बीच box model layer). इसके तीन हिस्से: width (मोटाई), style (solid, dashed आदि), और color. Border दिखने के लिए तीनों चाहिए — खास बात, border-style ज़रूरी है: बिना style के, width और color set करने पर भी border नहीं दिखता (style default "none" होता है). यह beginners को पकड़ता है: "मेरा border क्यों नहीं दिख रहा?" — आमतौर पर गायब style.

Border Shorthand — एक line

/* Teen lines ke bajaye: */
border-width: 2px;
border-style: solid;
border-color: navy;

/* Ek me jodo: */
border: 2px solid navy;
        │    │     │
        width style color
Border shorthand पूरी CSS की सबसे ज़्यादा use होने वाली lines में से एक है: border: 2px solid navy — width, style, colour, इसी order में. Borders 99% समय ऐसे ही लिखे जाते हैं; तीन separate properties शायद ही use करेंगे. Order practice में flexible है, पर width-style-colour standard convention है जो सब follow करते हैं. सरल, compact, हर जगह.

Border Styles — line types

border: 2px solid navy;    /* ──────── continuous line */
border: 2px dashed navy;   /* ─ ─ ─ ─  dashed line */
border: 2px dotted navy;   /* ········  dotted line */
border: 4px double navy;   /* ════════  do parallel lines */
dashed
dotted

style value line की दिखावट control करती है: solid (कहीं ज़्यादा common), dashed, dotted, double, groove, ridge. असली designs में solid हावी — बाकी कभी-कभार accents (dashed "drop files here" zones के लिए, dotted subtle dividers के लिए). Note none और hidden border हटाते हैं. सरल रखिए: solid लगभग सब कुछ संभालता है.

Individual Sides — एक किनारे पर border

border-bottom: 2px solid #ddd;    /* sirf neeche ka kinara */
border-left: 4px solid navy;      /* sirf baayan kinara (accent bar) */
सिर्फ एक side पर border लगा सकते हैं border-top, border-right, border-bottom, border-left से. दो बहुत common असली इस्तेमाल: अकेला border-bottom table rows या headings के लिए साफ underlines बनाता है (कोई भारी box नहीं), और border-left वह रंगीन accent bar बनाता है जो quote blocks और note cards पर दिखती है — असल में इसी tutorial के note cards रंगीन left border use करते हैं. One-sided borders subtle, professional design touch हैं.

border-radius — Rounded Corners

.card { border-radius: 8px; }       /* halke rounded corners */
.button { border-radius: 25px; }    /* pill-shaped button */
.avatar { border-radius: 50%; }     /* perfect circle! */
rounded 12px
50%
border-radius element के corners round करता है — और modern design में हर जगह है. छोटी value (8px) cards और buttons को वह नरम, friendly modern look देती है; बड़ी value pill-shaped buttons बनाती है. जादुई trick: square element पर border-radius: 50% perfect circle बनाता है — round profile pictures/avatars ठीक ऐसे ही बनते हैं (square image + 50% radius). border-radius चलने के लिए दिखने वाला border भी नहीं चाहिए; यह element के background और corners को बहरहाल round करता है. सबसे संतोषजनक, उपयोगी CSS properties में से एक.

Exam Corner

Q: Border के तीन हिस्से क्या हैं? width, style, color.

Q: Border दिखने के लिए कौन-सा हिस्सा ज़रूरी? border-style (default none).

Q: Border shorthand लिखिए. border: 2px solid navy; (width style color).

Q: Perfect circle कैसे बनाते हैं? Square (बराबर width/height) element पर border-radius: 50%.

Q: Element के सिर्फ नीचे line कैसे जोड़ते हैं? border-bottom: 2px solid #ddd;
← Back to CSS Tutorial
🔗

Share this topic with a friend

यह topic किसी दोस्त को भेजें

Found it useful? Send it to a classmate learning the same thing.

अच्छा लगा? जो दोस्त यही सीख रहा है, उसे भेज दीजिए।

💻 Live Code Editor

इस पेज का code यहाँ तैयार है — बदलिए और तुरंत नतीजा देखिए. कुछ install किए बिना.
👁 Live Preview
सब कुछ आपके browser में ही चलता है — कोई server, कोई signup नहीं. JavaScript का console.log देखने के लिए F12 दबाइए.