HTML Academy
Frame Image: border-image-repeat, Part 2
Frames and Backgrounds18/33
Back to the list of tasks
  • 1. Preparation
  • 2. Background Size, Step 1
  • 3. Background Size, Step 2
  • 4. Background Borders
  • 5. Background Cropping
  • 6. Multiple Background Images
  • 7. Positioning the background relative to different borders
  • 8. background-repeat: round
  • 9. background-repeat: space
  • 10. Outer Frame
  • 11. Rounding Corners, Part 1
  • 12. Rounding Corners, Part 2
  • 13. Frame Image: border-image-source
  • 14. Frame Image: border-image-slice
  • 15. Slicing Asymmetrical Images
  • 16. Frame Image: border-image-repeat, Part 1
  • 17. Frame Image: border-image-repeat, Part 2
  • 18. Frame Image: border-image-width
  • 19. Frame Image: border-image-outset
  • 20. Muffin’s Royal Frame
  • 21. Muffin’s Eco-Frame
  • 22. Muffin’s Round Frame, Part 1
  • 23. Muffin’s Round Frame, Part 2
  • 24. Challenge: The Sea Wolf
  • 25. Frames and Triangles, Part 1
  • 26. Frames and Triangles, Part 2
  • 27. Frames and Triangles, Part 3
  • 28. Creating an Arrow with a Frame
  • 29. Creating a Round Arrow with a Frame, Part 1
  • 30. Creating a Round Arrow with a Frame, Part 2
  • 31. Real-Life Triangles, Part 1
  • 32. Real-Life Triangles, Part 2
  • 33. Challenge: Jewelry Work
Frame Image: border-image-outset
  • Sign up
  • Log in

Loading…
Everything will be ready in few seconds

  • Theory
  • Theory
  • Comments

Frame Image: border-image-width

The next property we’ll look at is border-image-width.

The block must have a frame of a certain thickness that is specified using border-width. Then it can be assigned a background image for the frame. The area in which this image will be displayed by default is equal to the width of the frame.

The border-image-width property allows you to control the width of the visible area of the image frame and to scale it. This property does not change the width of the frame itself.

If the value of this property is greater than border-width, the frame image will crawl under the content even if the fill property is not set.

The width of the image frame is set in %, px, em, or other units. The value auto is also possible, where the width depends on the value border-image-slice.

You can specify different width values for the borders. In this case, the values are specified using a syntax that is similar to the one used for margin, padding in the following order: top, right, bottom, and left. For example:

border-image-width: 10px 20px 30px 40px;
border-image-width: 10px 50px;

Let’s try to control the width of the image frame.

Comments

  • index.html
  • style.css
HTML
<!DOCTYPE html> <html lang="en"> <head> <title>Frame Image: border-image-width</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 { box-sizing: border-box; margin: 50px auto; padding: 10px; width: 270px; height: 270px; outline: 10px solid white; border: 50px solid rgba(0, 0, 0, 0.4); border-image-source: url("img/border-img.png"); border-image-slice: 50; border-image-repeat: repeat; background: url("img/border-img.png") no-repeat #ffffff; background-clip: padding-box; background-origin: content-box; }

What didn’t you like in this task?

Thanks! We’ll fix everything at once!

The code has changed, click “Refresh” or turn autorun on.

You’ve gone to a different page

Click inside the mini-browser to shift the focus onto this window.

100%
Goalscompleted
0

    For the .portrait block, assign the following values to the border-image-width property:

    1. 80px,
    2. 20px 40px,
    3. 10px 25px 40px auto.

    Cookies ∙ Privacy ∙ License Agreement ∙ About ∙ Contacts ∙ © HTML Academy OÜ, 2019−2024

    VISAMastercard

    Log in

    or

    Forgot your password?

    Sign up

    Sign up

    or
    Log in

    Restore access

    Have you forgotten your password or lost access to your profile? Enter your email connected to your profile and we will send you a link to restore access.

    Forgot to connect your email to the profile? Email us and we’ll help.