CSS property: border-style MCQs Quiz | Class 10

Understanding the `border-style` Property in CSS

The CSS border-style property is fundamental for designing the visual appearance of borders around HTML elements. It defines the style of the four borders of an element: top, right, bottom, and left. Understanding the various border styles allows for creative and functional web layouts.

Key `border-style` Values

CSS offers a range of predefined border styles. Here’s a breakdown of the most common ones:

• none: This is the default value. It specifies no border. The computed border width is 0, even if a border-width is set.
• hidden: Similar to none, it also specifies no border. However, for table cells, hidden borders have a higher priority than none borders in border conflict resolution.
• dotted: Creates a border made of a series of dots. The size and spacing of the dots depend on the border-width.
• dashed: Creates a border made of a series of short dash segments. The length and spacing of the dashes depend on the border-width.
• solid: Displays a single, straight, unbroken line. This is one of the most commonly used styles.
• double: Shows two parallel solid lines. The border-width determines the combined thickness of the two lines and the space between them.
• groove: Creates a 3D grooved effect. It appears as if the border is carved into the page. The effect is dependent on the border-color.
• ridge: Creates a 3D ridged effect. It appears as if the border is coming out of the page. This is the inverse of groove and is also dependent on the border-color.
• inset: Creates a 3D inset effect. It makes the entire box appear as if it’s pushed into the display. This effect is also dependent on the border-color.
• outset: Creates a 3D outset effect. It makes the entire box appear as if it’s coming out of the display. This is the inverse of inset and is dependent on the border-color.

Shorthand Property for Borders

The border-style property can be used to set the style for all four sides simultaneously, or for individual sides. It can accept one, two, three, or four values:

• border-style: solid; (All four sides are solid)
• border-style: solid dotted; (Top and bottom are solid, left and right are dotted)
• border-style: solid dotted dashed; (Top is solid, left and right are dotted, bottom is dashed)
• border-style: solid dotted dashed groove; (Top is solid, right is dotted, bottom is dashed, left is groove)

For more control, you can use individual properties like border-top-style, border-right-style, border-bottom-style, and border-left-style.

Quick Revision Table of Border Styles

Practice Questions

1. What is the effect of border-style: hidden; on an element?

   Answer: It makes the border invisible, similar to none, but has a different priority in border conflict resolution, especially in tables.

2. If you apply border-style: double;, how many lines will be visible in the border?

   Answer: Two parallel solid lines.

3. Which border-style value is often used to give elements a subtle, simple outline?

   Answer: solid.

4. How do the groove and ridge border styles differ visually?

   Answer: groove appears carved into the page, while ridge appears to come out of the page. They are inverses of each other.

5. What happens if you set border-style: dotted solid;?

   Answer: The top and bottom borders will be dotted, and the left and right borders will be solid.