CSS border

The border property in CSS is used to set the border around an element. You can specify the border’s width, style, and color. The border property is a shorthand that combines these individual properties:

  1. border-width: Specifies the width of the border.
  2. border-style: Specifies the style of the border.
  3. border-color: Specifies the color of the border.

Border Styles

there are many border-style property.

  1. none: No border (default).
  2. solid: A solid line.
  3. dotted: A series of dots.
  4. dashed: A series of dashes.
  5. double: Two solid lines.
  6. hidden: A hidden border.
  7. groove: A 3D grooved border.
  8. ridge: A 3D ridged border.
  9. inset: A 3D inset border.
  10. outset: A 3D outset border.

Example:-

1. border:none


<p style="border:none;">border none Example</p>

Try it Yourself

border none Example

2. border:solid


<p style="border:solid;">border solid Example</p>

border solid Example

3. border:dotted


<p style="border:dotted;">Dotted Example</p>

Try it Yourself

border dotted Example

4. border:dashed


<p style="border:dashed;">border dashed Example</p>

Try it Yourself

border dashed Example

5. border:double


<p style="border:double;">border double Example</p>

Try it Yourself

border double Example

6. border:groove


<p style="border:groove;">border groove Example</p>

border groove Example

7. border:ridge


<p style="border:ridge;">border ridge Example</p>

border ridge Example

8. border:inset


<p style="border:inset;">border inset Example</p>

border inset Example

9. border:outset


<p style="border:outset;">border outset Example</p>

border outset Example

10. border:hidden


<p style="border:hidden;">border hidden Example</p>

border hidden Example

CSS border – Interview Questions

Q 1: What is CSS border?

Ans: Border defines the outline of an element.

Q 2: What are border components?

Ans: Border width, style, and color.

Q 3: Name common border styles.

Ans: Solid, dotted, dashed, double.

Q 4: How do you apply a border?

Ans: border: 1px solid black;

Q 5: Can borders be applied to individual sides?

Ans: Yes, like border-top, border-left.

CSS border – Objective Questions (MCQs)

Q1. Which property is used to set border around an element?





Q2. Which value makes the border dotted?





Q3. Which border style shows no border?





Q4. Which property sets only the top border?





Q5. Which border style shows two lines?





Related CSS border Topics