- !important
- Animation
- Background image
- Blur() function
- Border color
- Border radius
- Border width
- Borders
- Box model
- Box shadow
- Class attribute
- Clip path
- Color
- Comment
- Cursor
- Display property
- First-child selector
- Flexbox
- Font family
- Font size
- Font style
- Font weight
- Gap
- Gradient
- Grid layout
- Height
- ID selector
- Letter spacing
- Linking a style sheet
- Margin
- Media query
- Minmax() function
- N-th-child selector
- Object fit
- Opacity
- Outline
- Overflow property
- Padding
- Pixels
- Pointer events
- Position property
- Pseudo-classes
- Pseudo-elements
- Rotate
- Rounding an image
- Scale()
- Selectors
- Specificity
- Text align
- Text shadow
- Text wrap
- Transition property
- Translate() property
- Units
- Variable
- white-space
- Width
- Z-index
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.