You're working on a website where you want a circular profile picture, but the original image is square. How would you achieve this effect using CSS?
- border-radius: 50%;
- clip-path: circle(50%);
- mask-image: url(circle-mask.png);
- transform: rotate(45deg);
To create a circular profile picture from a square image, you can use the border-radius property and set it to 50%. This will round the corners of the square image and make it appear as a circle.
Loading...
Related Quiz
- Which CSS property specifies whether an animation should play in reverse on alternate cycles?
- How can you pause an animation before it begins or between iterations?
- How can you create a function in SASS that returns a value?
- While using a CSS preprocessor, you notice that the compiled CSS has selectors that are excessively long and specific. What might be a potential cause for this in your source files?
- What is the correct syntax to use a custom property in your CSS?