• Hajipur, Bihar, 844101

☰
❮
❯

CSS

CSS Basics

CSS Styling Properties

CSS Advanced Selectors & Features

CSS Media and Image Styling

CSS Layout Techniques

CSS Flexbox

CSS Grid

CSS Responsive Design (RWD)

CSS Borders

← Previous Next →

🔹 What is CSS Border?

CSS Borders are used to define the outline around an HTML element.
You can set the style, width, and color of the border.

🔸 Basic Border Syntax

element {
  border: 2px solid black;
}

  • 2px → border width

  • solid → border style

  • black → border color

🔸 Border Styles

Available values for border-style:

  • none

  • solid

  • dashed

  • dotted

  • double

  • groove

  • ridge

  • inset

  • outset

Example:

div {
  border-style: dotted;
}

🔸 Individual Border Sides

border-top: 2px solid red;
border-right: 3px dashed blue;
border-bottom: 1px solid black;
border-left: 4px double green;

🔸 Border Width, Style, and Color Separately

div {
  border-width: 3px;
  border-style: solid;
  border-color: orange;
}

🔸 Shorthand Border Property

div {
  border: 3px dotted blue;
}

✅ Combines width, style, and color into a single line.

🔸 Rounded Borders

Use the border-radius property:

div {
  border: 2px solid gray;
  border-radius: 10px;
}

✅ Makes the border corners rounded.

Practice Questions

Q1. Add a solid black border of 2px around a <div>.

Q2. Apply a dashed red border to all <p> elements.

Q3. Set only the top border of a <h1> to 3px dotted green.

Q4. Use shorthand to set a double 4px blue border.

Q5. Write a rule to set different border styles on each side of an image.

Q6. Add a 5px groove border to an element with class .box.

Q7. Apply a ridge border with color #ccc to all <section> elements.

Q8. Make the corners of a container rounded using border-radius: 15px.

Q9. Add a border only on the bottom of all <h2> elements.

Q10. Combine border-width, border-style, and border-color using separate properties.

CSS Borders Quiz

Q1: Which CSS property sets a border around an element?

A. outline
B. frame
C. border
D. stroke

Q2: What does border: 2px solid red; do?

A. Adds a dashed border
B. Adds a red solid border
C. Removes the border
D. Adds red padding

Q3: What value makes a border rounded?

A. border-shape
B. border-circle
C. border-radius
D. border-curve

Q4: Which of the following is a valid border style?

A. smooth
B. wavy
C. dashed
D. blurry

Q5: How do you apply only a top border?

A. border: top 2px solid black;
B. border-top: 2px solid black;
C. border-top-color: black;
D. border-black-top: 2px;

Q6: What does border: none; do?

A. Adds a default border
B. Removes any border
C. Sets border to transparent
D. Sets border to dotted

Q7: Which property defines the thickness of the border?

A. border-radius
B. border-color
C. border-width
D. border-size

Q8: Which is a valid way to make all four borders dashed?

A. border: dashed;
B. border: 2px dashed;
C. border-dashed: 2px;
D. border-style: 2px dashed;

Q9: What is the default border style?

A. solid
B. none
C. dotted
D. hidden

Q10: What will border-radius: 50%; do?

A. Nothing
B. Make corners very sharp
C. Create an oval or circle shape
D. Add a double border
← Previous Next →
Login
Go Back Top