MCQs Of Class 9: Borders and Outline
1. What property is used to add a border to an element?
- A) background-color
- B) border
- C) outline
- D) box-shadow
Answer: B) border
Explanation: The border property is used to define the border around an element, including its width, style, and color.
2. Which value for border-style is used to create a dashed line?
- A) solid
- B) dotted
- C) dashed
- D) double
Answer: C) dashed
Explanation: The dashed value for border-style creates a dashed line.
3. What does the border-radius property do?
- A) Adds a shadow around the element
- B) Rounds the corners of an element
- C) Defines the thickness of the border
- D) Adds space between the element and its border
Answer: B) Rounds the corners of an element
Explanation: The border-radius property is used to round the corners of an element's border.
4. Which of the following is the correct syntax to apply a red border with a width of 2px?
- A) border: 2px solid red;
- B) border: 2px dotted red;
- C) border: red 2px solid;
- D) border: 2px red solid;
Answer: A) border: 2px solid red;
Explanation: The correct syntax for specifying the border is border: <width> <style> <color>.
5. Which property is used to change the color of a border?
- A) border-color
- B) border-width
- C) border-style
- D) color
Answer: A) border-color
Explanation: The border-color property specifies the color of the border.
6. What is the default value for border-style if it is not defined?
- A) dashed
- B) solid
- C) none
- D) double
Answer: C) none
Explanation: If border-style is not defined, the default value is none, meaning no border is drawn.
7. Which of the following will create a circular shape using the border-radius property?
- A) border-radius: 50%;
- B) border-radius: 100%;
- C) border-radius: 0;
- D) border-radius: 10px 20px 30px 40px;
Answer: A) border-radius: 50%;
Explanation: A border-radius of 50% makes a square element circular by applying equal rounding to all corners.
8. How can you remove the default outline applied to an element when it gets focus?
- A) outline: none;
- B) outline: 0;
- C) border: none;
- D) Both A and B
Answer: D) Both A and B
Explanation: Setting outline: none; or outline: 0; will remove the default outline when the element is focused.
9. Which of the following values will add a dotted border?
- A) border-style: solid;
- B) border-style: dotted;
- C) border-style: double;
- D) border-style: dashed;
Answer: B) border-style: dotted;
Explanation: border-style: dotted; will create a dotted border around the element.
10. What is the purpose of the outline property in CSS?
- A) It adds an outer shadow to the element.
- B) It defines the space between the element and its border.
- C) It adds a line around an element outside of its border.
- D) It changes the border color of an element.
Answer: C) It adds a line around an element outside of its border.
Explanation: The outline property adds a line around an element that is outside the element's border and is typically used for focus indicators.
11. Which property controls the width of the border?
- A) border-width
- B) border-style
- C) border-color
- D) outline-width
Answer: A) border-width
Explanation: The border-width property controls the width of the border.
12. What happens if you set border-radius to 0px?
- A) It creates a circular shape.
- B) It creates a square with sharp corners.
- C) It makes the element invisible.
- D) It applies a large gap between elements.
Answer: B) It creates a square with sharp corners.
Explanation: A border-radius of 0px means no rounding, leaving the element with sharp corners.
13. What does the border-collapse property do when set to collapse?
- A) It merges the borders of adjacent table cells into a single border.
- B) It increases the space between table cells.
- C) It creates individual borders for each table cell.
- D) It changes the color of the table borders.
Answer: A) It merges the borders of adjacent table cells into a single border.
Explanation: border-collapse: collapse; collapses the borders between adjacent cells in a table into a single border.
14. How can you set different border styles for each side of a div?
- A) By using border-left, border-right, border-top, and border-bottom properties.
- B) By using border-style and separating the values with commas.
- C) By using border-radius for each side.
- D) By using outline for each side.
Answer: A) By using border-left, border-right, border-top, and border-bottom properties.
Explanation: To apply different border styles to each side, you need to use border-left, border-right, border-top, and border-bottom properties individually.
15. How do you apply a double border to an element?
- A) border-style: double;
- B) border: 5px double black;
- C) border-style: dashed;
- D) Both A and B
Answer: D) Both A and B
Explanation: The border-style: double; or border: 5px double black; syntax creates a double border.
16. What is the default value for the outline-style property?
- A) solid
- B) none
- C) dotted
- D) auto
Answer: B) none
Explanation: The default value for outline-style is none, meaning no outline is displayed.
17. Which of the following is true about border and outline?
- A) Both border and outline are drawn inside the element.
- B) border is drawn outside the element, while outline is drawn inside.
- C) border is drawn outside the element, while outline is drawn outside the element.
- D) border is used only for shapes, and outline is used for text.
Answer: C) border is drawn outside the element, while outline is drawn outside the element.
Explanation: Both border and outline are drawn outside the element, but outline is not part of the element’s box model and does not affect layout.
18. Which of the following properties applies a rounded border on all corners of an element?
- A) border-radius
- B) outline-radius
- C) border-border
- D) box-radius
Answer: A) border-radius
Explanation: The border-radius property applies a rounded effect to all corners of the element’s border.
19. How do you apply a border to only one side of a div?
- A) border: 1px solid red;
- B) border-top: 1px solid red;
- C) border-left: 1px solid red;
- D) Both B and C
Answer: D) Both B and C
Explanation: You can use border-top, border-right, border-bottom, or border-left to apply a border to a specific side.
20. Which value of border-style will create a solid border?
- A) dotted
- B) solid
- C) double
- D) none
Answer: B) solid
Explanation: The solid value for border-style creates a continuous, unbroken line around the element.
21. How can you change the width of a border?
- A) border-width
- B) border-radius
- C) border-color
- D) outline-width
Answer: A) border-width
Explanation: The border-width property controls the width of the border.
22. What is the purpose of the outline-width property?
- A) It controls the width of the border.
- B) It defines the thickness of the outline.
- C) It sets the width of the element.
- D) It creates a shadow effect.
Answer: B) It defines the thickness of the outline.
Explanation: The outline-width property is used to define the thickness of an outline.
23. Which property can be used to make the border invisible but still take up space?
- A) border: none;
- B) border: transparent;
- C) outline: none;
- D) border: 0;
Answer: B) border: transparent;
Explanation: The border: transparent; will make the border invisible but still take up space.
24. What is the default border for most elements in HTML?
- A) 1px solid black
- B) 2px dashed red
- C) no border
- D) 3px dotted blue
Answer: C) no border
Explanation: By default, most HTML elements do not have a border unless it is explicitly set.
25. How do you apply a 5px dashed red border to a button element?
- A) border: 5px dashed red;
- B) button {border: 5px dashed red;}
- C) border-style: dashed; border-width: 5px; border-color: red;
- D) All of the above
Answer: D) All of the above
Explanation: All three options correctly apply a dashed red border of 5px to the button.
26. How do you remove a border from an element without affecting its layout?
- A) border: none;
- B) border: 0;
- C) outline: none;
- D) Both A and B
Answer: D) Both A and B
Explanation: border: none; or border: 0; removes the border without affecting the element's layout.
27. What is the effect of setting border-collapse: separate; in a table?
- A) It merges the borders between table cells.
- B) It separates the borders between table cells.
- C) It hides the table borders.
- D) It adds padding between table cells.
Answer: B) It separates the borders between table cells.
Explanation: border-collapse: separate; ensures that the borders between table cells are distinct and not merged.
28. Which of the following is a valid shorthand for setting a border?
- A) border: 3px solid blue;
- B) border: dashed 3px blue;
- C) border: 3px blue dashed;
- D) border: blue 3px dashed;
Answer: A) border: 3px solid blue;
Explanation: The correct shorthand for defining a border is border: <width> <style> <color>.
29. What does the outline-offset property do?
- A) It changes the width of the outline.
- B) It defines the space between the outline and the element.
- C) It sets the color of the outline.
- D) It adds padding to the element.
Answer: B) It defines the space between the outline and the element.
Explanation: The outline-offset property controls the distance between the element's border and its outline.
30. What happens when the outline property is set to none?
- A) It removes the outline but does not affect the border.
- B) It makes the outline thicker.
- C) It makes the outline dashed.
- D) It hides the border completely.
Answer: A) It removes the outline but does not affect the border.
Explanation: outline: none; removes the outline, but it does not affect the border of the element.
31. Which of the following is true about borders and padding?
- A) Borders are part of the padding box.
- B) Padding lies outside the border.
- C) Padding lies inside the border.
- D) Padding cannot exist if a border is applied.
Answer: C) Padding lies inside the border.
Explanation: Padding exists inside the border, separating the content from the border.
32. How can you set a custom rounded shape for specific corners?
- A) border-radius: 20px 30px 40px 50px;
- B) border-radius: 20% 30% 40% 50%;
- C) border-radius: 20px;
- D) Both A and B
Answer: D) Both A and B
Explanation: You can set different values for each corner using border-radius with up to four values.
33. How can you apply a green 1px solid border only to the left side of a div?
- A) border-left: 1px solid green;
- B) border: 1px solid green;
- C) border-top: 1px solid green;
- D) border-left: green 1px solid;
Answer: A) border-left: 1px solid green;
Explanation: To apply a border only to the left side, use border-left.
34. What is the outline-color property used for?
- A) To set the color of the outline around an element.
- B) To set the width of the outline.
- C) To set the style of the outline.
- D) To set the border color.
Answer: A) To set the color of the outline around an element.
Explanation: The outline-color property defines the color of the outline.
35. Which of the following is NOT a valid value for border-style?
- A) solid
- B) dotted
- C) gap
- D) double
Answer: C) gap
Explanation: gap is not a valid value for border-style. The valid values are solid, dotted, dashed, double, and none.
36. How do you apply a 5px dotted outline with a color of blue?
- A) outline: 5px dotted blue;
- B) outline-color: blue; outline-style: dotted; outline-width: 5px;
- C) Both A and B
- D) None of the above
Answer: C) Both A and B
Explanation: Both methods are correct for applying a blue dotted outline.
37. What does the outline-style property specify?
- A) The width of the outline.
- B) The color of the outline.
- C) The style of the outline (solid, dotted, dashed, etc.).
- D) The distance between the outline and the element.
Answer: C) The style of the outline (solid, dotted, dashed, etc.).
Explanation: The outline-style property is used to set the style of the outline, such as solid, dotted, dashed, etc.
38. How do you set the border to be completely transparent?
- A) border: transparent;
- B) border-color: transparent;
- C) border: none;
- D) border: 0;
Answer: B) border-color: transparent;
Explanation: The border-color: transparent; makes the border transparent while maintaining its space.
39. Which property controls the space between the border and the content inside the element?
- A) padding
- B) margin
- C) border-spacing
- D) outline-spacing
Answer: A) padding
Explanation: The padding property controls the space between the content inside an element and its border.
40. Which value for border-radius creates a pill shape on a rectangle?
- A) border-radius: 50%;
- B) border-radius: 20px;
- C) border-radius: 100px;
- D) border-radius: 100% 50%;
Answer: D) border-radius: 100% 50%;
Explanation: border-radius: 100% 50%; makes the rectangle have a pill-like shape with rounded sides.
41. What will the following CSS do? border: 2px solid red;
- A) Adds a 2px solid red border around the element.
- B) Adds a 2px dashed red border around the element.
- C) Adds a red outline.
- D) Adds a background color of red.
Answer: A) Adds a 2px solid red border around the element.
Explanation: The border: 2px solid red; rule adds a 2px solid red border.
42. What is the effect of border-box in the box-sizing property?
- A) It includes padding and border in the element's total width and height.
- B) It excludes padding and border from the element's total width and height.
- C) It applies a border to all sides of the element.
- D) It changes the padding and margin behavior.
Answer: A) It includes padding and border in the element's total width and height.
Explanation: box-sizing: border-box; ensures that padding and border are included in the element's total width and height.
43. What does the border-top property do?
- A) It adds a border on the top side of the element.
- B) It adds a border to the left side of the element.
- C) It adds a border to the bottom side of the element.
- D) It adds a border to the right side of the element.
Answer: A) It adds a border on the top side of the element.
Explanation: The border-top property adds a border only to the top of the element.
44. What is the default value for the border-style property?
- A) solid
- B) none
- C) dotted
- D) dashed
Answer: B) none
Explanation: By default, the border-style is set to none, meaning no border is applied.
45. How do you apply a 10px solid black border to the top and bottom of an element?
- A) border: 10px solid black;
- B) border-top: 10px solid black; border-bottom: 10px solid black;
- C) border-top: 10px solid black; border: 0; border-bottom: 10px solid black;
- D) border-top: 10px solid black; border-bottom: 10px solid black;
Answer: B) border-top: 10px solid black; border-bottom: 10px solid black;
Explanation: This applies a 10px black border to only the top and bottom of the element.
46. What does the border-radius property do?
- A) Rounds the corners of an element.
- B) Sets the width of the border.
- C) Sets the color of the border.
- D) Adds padding to the element.
Answer: A) Rounds the corners of an element.
Explanation: The border-radius property is used to round the corners of an element.
47. What is the effect of outline: solid 2px blue;?
- A) It creates a solid blue outline around the element with a thickness of 2px.
- B) It creates a solid border around the element with a thickness of 2px.
- C) It adds a background color of blue with 2px thickness.
- D) It adds a 2px shadow effect.
Answer: A) It creates a solid blue outline around the element with a thickness of 2px.
Explanation: This rule creates a 2px solid blue outline around the element.
48. Which of the following CSS properties is used to specify the space between content and border?
- A) padding
- B) margin
- C) border-spacing
- D) outline-spacing
Answer: A) padding
Explanation: The padding property defines the space between the content and the border of an element.
49. What will the following CSS property do? border-color: red blue green yellow;
- A) Sets the top border to red, right to blue, bottom to green, and left to yellow.
- B) Sets all borders to yellow.
- C) Sets the top border to yellow, right to green, bottom to blue, and left to red.
- D) None of the above.
Answer: A) Sets the top border to red, right to blue, bottom to green, and left to yellow.
Explanation: This shorthand sets the color for each border in clockwise order starting from the top.
50. How do you apply a 5px solid red border to only the right side of a div?
- A) border-right: 5px solid red;
- B) border-left: 5px solid red;
- C) border: 5px solid red;
- D) border-bottom: 5px solid red;
Answer: A) border-right: 5px solid red;
Explanation: The border-right property applies a border to the right side of the element.
No comments:
Post a Comment