From the course: Making Sense of the CSS Box Model
Join today to access over 22,600 courses taught by industry experts or purchase this course individually.
Shapes - CSS Tutorial
From the course: Making Sense of the CSS Box Model
Shapes
- [Instructor] This entire course is about the CSS Box Model, and everything we've talked about has been centered around boxes, squares and rectangles with nice square corners. What if I told you the box doesn't have to be a box anymore? That the box part of the box model is evolving into something more flexible. That's what we get the shape-outside property. To see how this works, we need to activate the Firefox developer tools because here we can actually work with shape-outside in the browser. In this document, I have some paragraphs and a div with a glyph inside it and it's floated to the left. Right now, the element floated to the left is a box, so everything wrapping around it has a hard vertical and horizontal border, but look what happens if I apply the shape-outside circle property to the floated element. Now the content around the floated element acts as if the box is a circle because it is, and if we activate…
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.