From the course: CSS: Enhancing Website Graphics
Join today to access over 22,500 courses taught by industry experts or purchase this course individually.
Apply border images - CSS Tutorial
From the course: CSS: Enhancing Website Graphics
Apply border images
- [Instructor] Thus far, our borders have been limited to the graphical styles specified by the CSS border style property, so if you want to apply a border design not offered by CSS, you have to use a border image. Here, I have a web page containing the text of a John Keats poem. This page design might be improved if the poem were enclosed within a fancy border. Maybe a border like this one, but how to I turn this graphic into a border image? I can do that in CSS using the border-image style, where url is the name and location of the graphic file I want to use, and slice is the size of the slices that cut the image into eight pieces. Four pieces that will be used for the corners, and four for the sides. In this demo, I've created a graphic, shown on the left, that will be the source for my borer image. The object on the right provides a preview of the border that will be generated by the border-image style. The red lines mark the location of the four slices that cut the border image…
Practice while you learn with exercise files
Download the files the instructor uses to teach the course. Follow along and learn by watching, listening and practicing.
Download courses and learn on the go
Watch courses on your mobile device without an internet connection. Download courses using your iOS or Android LinkedIn Learning app.