Which CSS property is most commonly used to create circular images?
Analysis & Theory
`border-radius: 50%` is used to create circular images when the image is square in size.
What does `clip-path: circle();` do to an image?
A
Adds a border in a circle shape
B
Crops the image into a circular shape
C
Rotates the image around a circle
D
Applies a shadow inside a circle
Analysis & Theory
`clip-path: circle();` masks the image with a circular clipping path, showing only the circular area.
Which CSS property defines how text flows around a custom image shape?
Analysis & Theory
`shape-outside` controls how text wraps around an element with a defined shape.
Which of the following shapes can be created using `clip-path`?
A
circle, ellipse, polygon
Analysis & Theory
`clip-path` supports basic shapes like `circle`, `ellipse`, `inset`, and complex custom `polygon()` paths.
How can you crop an image into a triangle?
A
border-radius: 0 0 50% 0;
B
clip-path: polygon(...)
C
shape-outside: triangle();
D
object-shape: triangle();
Analysis & Theory
`clip-path: polygon(...)` lets you define any custom shape, including triangles, using coordinate points.
Which unit is typically used to define clip-path shapes?
Analysis & Theory
Clip-path values are usually defined in percentages (`%`) to make them responsive to image size.
What does `object-fit: cover;` do when applied to an image inside a shaped container?
A
Stretches the image inside the shape
B
Ensures the image fills the shape while maintaining aspect ratio
C
Aligns the image to the left corner
D
Adds a border around the shape
Analysis & Theory
`object-fit: cover;` ensures the image fills the shape entirely, possibly cropping it, while keeping aspect ratio.
Which value of `border-radius` makes only the top-left corner rounded?
B
border-radius: top-left;
C
border-top-left-radius: 50px;
D
border-radius: 50px 0 0 0;
Analysis & Theory
`border-top-left-radius` targets just the top-left corner to apply a rounded effect.
Which of the following creates an elliptical image shape?
A
border-radius: 50% 25%;
Analysis & Theory
`clip-path: ellipse();` clips the image into an oval (elliptical) shape.
What does `shape-outside: circle(); float: left;` do?
A
Creates a circular image
B
Wraps text around a circular-shaped floated element
C
Centers the image in a circle
Analysis & Theory
`shape-outside` works with floated elements to define how text wraps around the shape (e.g., a circle).