WikiGalaxy
CSS Image Shapes
Circle Shape:
Creating a circular image is a common design technique. By setting the border-radius to 50%, you can transform any square image into a perfect circle.
Rounded Corners:
For softer edges, apply a border-radius of less than 50%. This gives the image rounded corners, making it appear more approachable and less rigid.
Ellipse Shape:
To create an ellipse, adjust the border-radius to be greater on one axis. This can give images a unique and dynamic look.
.circle {
width: 100px;
height: 100px;
border-radius: 50%;
overflow: hidden;
}
.rounded-corners {
border-radius: 15px;
}
.ellipse {
width: 150px;
height: 100px;
border-radius: 50% / 25%;
}
Circle Example:
This technique is often used for profile pictures, ensuring the image maintains a consistent aspect ratio.
Rounded Corners Example:
Ideal for cards or containers where a softer appearance is desired, enhancing visual appeal.
Ellipse Example:
Use this shape to add a distinctive style to image displays, particularly in creative design layouts.
Console Output:
Images styled as Circle, Rounded Corners, and Ellipse.
