logo

📘 CSS Properties – Borders & Box Model

(CBSE Class 10 Study Notes)

CSS helps control the appearance of webpage elements.
We use properties like border, margin, padding, and outline to design structure and spacing.

1. border-style Property

Key Point

border-style defines the type of border around an element.

Explanation

You can make borders look different by changing their style.
Some common border styles:

  • solid: A continuous line.
  • dashed: Made of dashes.
  • dotted: Made of dots.
  • double: Two parallel lines.
  • none: No border at all.

This property must be set for a border to appear. If you don’t set border-style, even if you set color and width, no border shows up.

Examples

  1. p { border-style: solid; }
    This adds a solid line border around paragraphs.

  2. div { border-style: dashed; }
    Creates dashed borders around div elements.

  3. h1 { border-style: double; }
    Applies double line borders around headings.

2. border-width Property

Key Point

Sets how thick the border line is.

Explanation

The border’s thickness can be hairline thin or thick based on this property.

You can specify size with:

  • Pixels (px) — e.g., 1px, 3px, 5px.
  • Keywords — thin, medium, or thick for preset thickness.

Examples

  1. div { border-width: 2px; }
    Creates a border 2 pixels thick.

  2. p { border-width: thick; }
    Makes the border thicker without needing pixel values.

  3. span { border-width: 1px; border-style: solid; }
    Combined with style to display a thin solid border.

3. border-color Property

Key Point

Controls the color of the border line.

Explanation

Borders can be any color you like.
You define colors by:

  • Named colors like red, blue, black.
  • Hexadecimal color codes like #ff0000.
  • RGB values like rgb(255, 0, 0).

Examples

  1. h1 { border-color: blue; }
    Border appears blue.

  2. p { border-color: #00ff00; }
    Border turns green using hex code.

  3. div { border-color: rgb(255, 165, 0); }
    Orange border with RGB values.

4. Combined Border Example

You can set style, width, and color together to create any border:

p {
  border-style: solid;
  border-width: 2px;
  border-color: red;
}

This results in a 2px thick solid red border around paragraph elements.

5. margin Property

Key Point

margin is the space outside the border.

Explanation

Margins create distance between elements on the page.
Margins push the element away from neighboring elements.

You can use:

  • Single value → applies to all four sides.
  • Four values → define margins for top, right, bottom, and left in that order.
  • Units like px, em, %, or auto (browser decides).

Examples

  1. p { margin: 20px; }
    20px margin on all sides.

  2. p { margin: 10px 20px 30px 40px; }
    Margins: top=10px, right=20px, bottom=30px, left=40px.

  3. div { margin: auto; }
    Centres the element horizontally (usually applied when width is set).

6. padding Property

Key Point

padding is space inside the border between content and border.

Explanation

Padding pushes the content inward, adding breathing space inside the element.
This helps to make text or content look neat and easier to read.

You can specify padding for all sides or individually for top, right, bottom, left.

Examples

  1. div { padding: 15px; }
    15px space inside on all sides.

  2. div { padding: 10px 20px 10px 20px; }
    Padding: top=10px, right=20px, bottom=10px, left=20px.

  3. p { padding: 5px 10px; }
    Top and bottom 5px, right and left 10px (if two values are given).

7. Difference Between Margin and Padding

MarginPadding
Space outside the borderSpace inside the border
Creates distance between elementsCreates space between content & border
Does NOT increase element sizeIncreases total box size

Explanation

Margin pushes away neighboring elements while padding creates inner space that enlarges the box.

Important:

  • Padding increases the element’s size (width+padding +border).
  • Margin adds space outside, so does not affect size but distribution.

Example:
If a div has width 100px and padding 10px, actual size becomes 120px wide (plus border).

8. outline Property

Key Point

outline draws a line outside the border, but does not take up space or affect layout.

Explanation

Unlike borders, outlines don’t impact how much space the element occupies.
They’re often used for highlighting an element (e.g., when focused).

Syntax:

selector {
  outline: style width color;
}

Examples of outline styles: solid, dashed, dotted.

Differences Between Border and Outline

BorderOutline
Takes up spaceDoes NOT take up space
Part of the box modelNot part of the box model
Affects element sizeDoes not affect element size
Drawn around paddingDrawn outside the border

Example:

p {
  outline: dashed 2px blue;
}

This draws a blue dashed line outside the border without changing layout.

9. Full Example Using All Properties

div {
  border-style: solid;
  border-width: 3px;
  border-color: green;
  padding: 15px;
  margin: 20px;
  outline: dashed 2px red;
}

Meaning:

  • Solid green border of 3px thickness.
  • 15px padding inside the border around content.
  • 20px margin outside, creating space from other elements.
  • Red dashed outline outside border, without affecting box size.

Scenario Based Questions

  1. Scenario: You want to add a dotted border to emphasize important text in a paragraph.

    • Question: Which CSS properties and values would you use?
    • Answer: Set border-style: dotted;, choose a suitable border-width (like 2px), and a noticeable border-color (e.g., black), such as: 
      p {
  border-style: dotted;
  border-width: 2px;
  border-color: black;
}

  2. Scenario: A heading looks cramped inside its box. You want to increase space around the text without changing the box’s border properties.

    • Question: Which property should you modify and how?
    • Answer: Increase the padding value to add space inside the border, like: 
      h1 {
  padding: 20px;
}

  3. Scenario: You want two div elements to have space between them but keep their internal text tightly packed.

    • Question: Which CSS property controls the space outside the element?
    • Answer: Use margin to control space outside elements: 
      div {
  margin: 15px;
  padding: 5px;
}

  4. Scenario: You want to add a red outline around images on focus without changing their size or layout.

    • Question: How do you do this?
    • Answer: Use the outline property which does not affect layout: 
      img:focus {
  outline: red solid 3px;
}

  5. Scenario: You set border color and width but no border appears. What could be the problem?

    • Question: What is likely missing in your CSS?
    • Answer: The border-style property is missing or set to none. You must set a border style for the border to appear.

Using these properties wisely helps make webpages look organized and visually pleasing. Experiment with values to see how the box model affects element layout!
Have fun playing with borders and boxes! 🖥️✨

Back to Topics

Take the test