Which CSS property is used to create rounded corners?
Analysis & Theory
`border-radius` is the CSS property used to round the corners of an element.
What does `border-radius: 10px;` do?
A
Rounds all corners with a 10-pixel radius
C
Makes the border 10px thick
D
Creates a square border
Analysis & Theory
`border-radius: 10px;` applies a 10px curve to all four corners of the element.
Which syntax would round **only the top-left** and **bottom-right** corners?
A
border-radius: 10px 0px 10px 0px;
B
border-radius: top-left 10px, bottom-right 10px;
C
border-corner: tl 10px br 10px;
D
border-radius: 10px 10px;
Analysis & Theory
The four values of `border-radius` follow the order: top-left, top-right, bottom-right, bottom-left.
What shape is created by setting `border-radius: 50%;` on a square element?
Analysis & Theory
Setting `border-radius: 50%` on a square element makes it perfectly circular.
Which property allows setting different radii for each corner?
Analysis & Theory
`border-radius` can take multiple values to apply different corner rounding.
What does `border-radius: 10px 20px;` apply?
B
10px on top-left/bottom-right and 20px on top-right/bottom-left
C
20px on top-left/bottom-right and 10px on top-right/bottom-left
D
10px top-left, 20px top-right, and others 0
Analysis & Theory
Two values: 1st for top-left & bottom-right, 2nd for top-right & bottom-left.
Which of the following is the correct way to round only the **top-left corner**?
A
border-radius: top-left 10px;
B
border-top-left-radius: 10px;
D
border-corner-left: 10px;
Analysis & Theory
`border-top-left-radius` targets the top-left corner individually.
What shape results from `border-radius: 50% 25%;` on a rectangle?
Analysis & Theory
Different horizontal and vertical percentages create an elliptical shape.
What unit types can be used with `border-radius`?
Analysis & Theory
`border-radius` supports multiple units including `px`, `em`, `rem`, and `%`.
Which of the following applies **no rounded corners** to an element?
D
border-radius: default;
Analysis & Theory
`border-radius: 0;` sets all corners to be sharp with no rounding.