CSS Borders Practice Questions with Solutions

By /

Introduction

CSS borders are used to create visible outlines around HTML elements. You can control the border’s width, style, color, and even apply different borders to each side of an element. Borders improve the appearance of buttons, cards, images, forms, and other webpage sections. In this chapter, you’ll practice CSS border properties through simple solved questions designed for beginners. CSS Borders Practice questions with solutions help to understand the concepts.

Question 1: Add a Solid Border Around a Div

Problem Statement

Write CSS to add a 2px solid black border around a <div> element.

CSS Code

div {
    border: 2px solid black;
}

Output

A 2px solid black border appears around the <div> element.

Explanation

  • border is a shorthand property.
  • 2px sets the border width.
  • solid defines the border style.
  • black sets the border color.

Question 2: Change the Border Color

Problem Statement

Write CSS to create a 3px solid blue border around all paragraphs.

CSS Code

p {
    border: 3px solid blue;
}

Output

All paragraphs display a 3px solid blue border.

Explanation

  • border adds a border around the element.
  • 3px defines the thickness.
  • solid creates a continuous line.
  • blue changes the border color.

Question 3: Apply a Dashed Border

Problem Statement

Write CSS to add a 2px dashed red border around an <h2> heading.

CSS Code

h2 {
    border: 2px dashed red;
}

Output

The <h2> heading displays a red dashed border.

Explanation

  • dashed creates a broken-line border.
  • Dashed borders are often used to highlight sections.
  • The border surrounds the entire element.

Question 4: Apply a Dotted Border

Problem Statement

Write CSS to add a 4px dotted green border around a <section> element.

CSS Code

section {
    border: 4px dotted green;
}

Output

The <section> element displays a green dotted border.

Explanation

  • dotted creates a border made of dots.
  • 4px increases the border thickness.
  • The color is set using green.

Question 5: Round the Corners of a Border

Problem Statement

Write CSS to create a 2px solid black border with 10px rounded corners around a <div>.

CSS Code

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

Output

The <div> displays a solid black border with rounded corners.

Explanation

  • border-radius rounds the corners of the border.
  • 10px creates smooth curved corners.
  • Rounded borders are commonly used in modern web design.

Question 6: Add a Border to the Top Only

Problem Statement

Write CSS to add a 4px solid blue border only to the top of a <div> element.

CSS Code

div {
    border-top: 4px solid blue;
}

Output

Only the top side of the <div> displays a 4px solid blue border.

Explanation

  • border-top applies a border only to the top side.
  • 4px sets the border thickness.
  • solid defines the border style.
  • blue sets the border color.

Question 7: Apply Different Borders on Different Sides

Problem Statement

Write CSS to apply different border styles to each side of a <div>.

CSS Code

div {
    border-top: 3px solid red;
    border-right: 3px dashed blue;
    border-bottom: 3px dotted green;
    border-left: 3px double orange;
}

Output

The <div> displays:

  • Top: Solid red border
  • Right: Dashed blue border
  • Bottom: Dotted green border
  • Left: Double orange border

Explanation

  • border-top styles the top border.
  • border-right styles the right border.
  • border-bottom styles the bottom border.
  • border-left styles the left border.
  • Each side can have its own width, style, and color.

Question 8: Apply a Double Border

Problem Statement

Write CSS to add a 5px double purple border around a paragraph.

CSS Code

p {
    border: 5px double purple;
}

Output

The paragraph displays a 5px double purple border.

Explanation

  • double creates two parallel border lines.
  • 5px controls the border thickness.
  • purple changes the border color.
  • Double borders are useful for decorative designs.

Question 9: Create a Circular Border

Problem Statement

Write CSS to create a circular shape using a border and border-radius.

CSS Code

div {
    width: 150px;
    height: 150px;
    border: 3px solid black;
    border-radius: 50%;
}

Output

The <div> appears as a circle with a black border.

Explanation

  • width and height create a square.
  • border-radius: 50% converts the square into a circle.
  • border adds an outline around the circle.
  • This technique is commonly used for profile images and icons.

Question 10: Use Individual Border Properties

Problem Statement

Write CSS to create a 2px solid green border using separate border properties.

CSS Code

div {
    border-width: 2px;
    border-style: solid;
    border-color: green;
}

Output

The <div> displays a 2px solid green border.

Explanation

  • border-width sets the thickness.
  • border-style defines the appearance of the border.
  • border-color changes the border color.
  • These individual properties provide more control than the shorthand property.

Key Takeaways

  • border is a shorthand property for width, style, and color.
  • CSS supports border styles such as solid, dashed, dotted, and double.
  • border-radius creates rounded corners and circles.
  • You can apply borders to individual sides using border-top, border-right, border-bottom, and border-left.
  • Individual properties like border-width, border-style, and border-color offer greater flexibility.
  • Borders improve the appearance of buttons, cards, forms, and containers.
  • Choosing the right border style enhances the overall user interface.

Frequently Asked Questions (FAQs)

1. What is the CSS border property?

The CSS border property adds an outline around an HTML element. It combines the border width, style, and color into a single declaration.

2. What are the most common border styles in CSS?

The most commonly used border styles are solid, dashed, dotted, double, groove, ridge, inset, and outset.

3. What is the purpose of border-radius?

The border-radius property rounds the corners of an element. Setting it to 50% creates a circular shape when the width and height are equal.

4. Can I apply a border to only one side of an element?

Yes. You can use properties like border-top, border-right, border-bottom, or border-left to apply a border to a specific side.

5. What is the difference between the border shorthand and individual border properties?

The border shorthand sets the width, style, and color in one line, while individual properties allow you to control each setting separately.

6. Can each side of an element have a different border?

Yes. CSS allows you to assign different widths, styles, and colors to each side of an element independently.

7. Why are borders important in web design?

Borders help separate content, highlight important sections, improve readability, and make web pages look more organized and professional.

Written by Shubhranshu Shekhar, who has trained 20000+ students in coding.

Related Posts

Scroll to Top