Loading lesson path
Learn how to style images using CSS.
Formula
You can use the border - radius property to create rounded images:img {
border-radius: 8px;
}img {
border-radius: 50%;
}CSS Image Shapes chapter to learn how to shape (clip) images to circles, ellipses and polygons.
Use the border property to create thumbnail images:
Example img {
border: 1px solid #ddd;
border-radius: 4px;
padding: 5px;
width: 150px;
}Example img {
border: 1px solid #ddd;
border-radius: 4px;
padding: 5px;
width: 150px;
}
img:hover {Formula
box - shadow: 0 02px 1px rgba(0, 140, 186, 0.5);
}Responsive images will automatically adjust to fit the size of the screen. Resize the browser window to see the effect: If you want an image to scale down if it has to, but never scale up to be larger than its original size, add the following:
Example img {
max-width: 100%;height:
auto;
}Read more about Responsive Web Design in our CSS RWD Tutorial.
Formula
Polaroid Images / CardsExample div.polaroid {
width: 80%;
background-color: white;Formula
box - shadow: 0 4px 8px 0 rgba(0,0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
img {width: 100%}
div.container {
text-align: center;
padding: 10px 20px;
}CSS can be used to create responsive image galleries. This example use media queries to re-arrange the images on different screen sizes. Resize the browser window to see the effect:
@media only screen and (max-width: 768px) {
div.gallery-item {
width: calc(50% - 20px);
}
}
@media only screen and (max-width: 480px) {
div.gallery-item {
width: calc(100% - 20px);
}
}Read more about Responsive Web Design in our CSS RWD Tutorial.