Glossary
- Background image
- Border color
- Border radius
- Border width
- Borders
- Class attribute
- Color
- Comment
- First-child selector
- Font family
- Font size
- Font style
- Font weight
- Height
- Linking a style sheet
- Margin
- N-th-child selector
- Overflow property
- Padding
- Pixels
- Position property
- Rounding an image
- Selectors
- Text align
- Transition property
- Width
CSS
Rounding an image in CSS
To make an image a circle, we set border-radius to half the width of an image. It only works if the image is a square though!
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<img src="https://mimo.app/r/lighthouse.png">
</body>
img {
height: 100px;
width: 100px;
border-radius: 50px;
border: solid 5px;
}
Learn CSS for Free
Start learning now
To advance beyond this tutorial and learn CSS by doing, try the interactive experience of Mimo. Whether you're starting from scratch or brushing up your coding skills, Mimo helps you take your coding journey above and beyond.
Sign up or download Mimo from the App Store or Google Play to enhance your programming skills and prepare for a career in tech.