- Theory
- Theory
- Comments
Muffin’s Round Frame, Part 1
Unfortunately, the border-radius property does not affect border-image, so the only way to make a rounded frame is to use a circular image.
In this assignment and the next one, we will create a rounded portrait of Muffin by using a round frame. To do this, let’s slice the image for the frame as follows:
We will also use the fill mode, since the image for the frame is transparent inside.
- index.html
- style.css
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Muffin’s Round Frame, Part 1</title>
<meta charset="utf-8">
<link rel="stylesheet" href="setting.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="portrait"></div>
</body>
</html>
CSS
.portrait {
margin: 50px auto;
width: 300px;
height: 300px;
outline: 5px solid white;
border: 50px solid transparent;
background-color: rgba(255, 255, 255, 0.4);
background-image: url("img/muffin-3.jpg");
background-position: center;
background-size: cover;
background-repeat: no-repeat;
}
You’ve gone to a different page
Click inside the mini-browser to shift the focus onto this window.
Goalscompleted
0
- Set the frame background image
img/leafs-frame.pngfor the portrait, - assign the value
180for theborder-image-sliceproperty - then add
filltoborder-image-slice.
Comments