Skip to main content
CSS-Tricks
  • Articles
  • Alamanac
  • Guides
  • Videos
  • Books
  • Newsletter
Search

Articles Tagged
shape-outside

10 Articles
{
,

}
Direct link to the article Please Give Me Some Space
border-spacing gap inset margin shape-outside translate

Please Give Me Some Space

There’s all kinds of ways to do that. Some more advisable and better-suited for certain situations than others, of course.…

Avatar of Geoff Graham
Geoff Graham on Jun 3, 2022
Direct link to the article Using CSS Shapes for Interesting User Controls and Navigation
css shapes shape-outside

Using CSS Shapes for Interesting User Controls and Navigation

Straight across or down, that’s the proverbial order for user controls on a screen. Like a list of menu items. But what if we change that to a more fluid layout with bends, curves, and nooks? We can pull it …

Avatar of Preethi
Preethi on Aug 4, 2021 (Updated on Aug 6, 2021)
Direct link to the article Float an Element to the Bottom Corner
flexbox float shape-outside

Float an Element to the Bottom Corner

Need to lay out an element to the right or the left, such that text wraps around it? That’s an easy task for the float property. But what about if you also want to push that element (let’s call it …

Avatar of Temani Afif
Temani Afif on Apr 19, 2021 (Updated on May 21, 2024)
Direct link to the article Using CSS to Set Text Inside a Circle
blockquote shape-outside

Using CSS to Set Text Inside a Circle

You want to set some text inside the shape of a circle with HTML and CSS? That’s crazy talk, right?

Not really! Thanks to shape-outside and some pure CSS trickery it is possible to do exactly that. …

Avatar of Kerry Smyth
Kerry Smyth on Apr 14, 2020 (Updated on May 15, 2020)
Direct link to the article Float Element in the Middle of a Paragraph
clip-path float shape-outside

Float Element in the Middle of a Paragraph

Say you want to have an image (or any other element) visually float left into a paragraph of text. But like… in the middle of the paragraph, not right at the top. It’s doable, but it’s certainly in the realm …

Avatar of Chris Coyier
Chris Coyier on Nov 4, 2019
Direct link to the article 8 Little Videos About the Firefox Shape Path Editor
clip-path shape-outside

8 Little Videos About the Firefox Shape Path Editor

It sometimes takes a quick 35 seconds for a concept to really sink in. Mikael Ainalem delivers that here, in the case that you haven’t quite grokked the concepts behind path-based CSS properties like clip-path and shape-outside. …

Avatar of Chris Coyier
Chris Coyier on Mar 7, 2019
Direct link to the article People Talkin’ Shapes
clip-path shape-outside shapes

People Talkin’ Shapes

Codrops has a very nice article on CSS Shapes from Tania Rascia. You might know shape-outside is for redefining the area by which text is floated around that element, allowing for some interesting design opportunities. But there are a couple …

Avatar of Chris Coyier
Chris Coyier on Dec 21, 2018
Direct link to the article A CSS Venn Diagram
charts css shapes grid shape-outside

A CSS Venn Diagram

This is pretty wild: Adrian Roselli has made a series of rather complex Venn diagrams using nothing but CSS. With a combination of the Firefox dev inspector, plus a mixture of CSS Grid and the shape-outside property, it’s possible to …

Avatar of Robin Rendle
Robin Rendle on Dec 17, 2018
Direct link to the article CSS Shape Editors
shape-outside shapes

CSS Shape Editors

Firefox 62 is shipping out of beta on September 5th. The big notable thing for CSS developers is that it will now support the shape-outside property with polygon(), circle(), and ellipse(), joining Chrome and Safari.…

Avatar of Chris Coyier
Chris Coyier on Aug 30, 2018
Direct link to the article shape-outside
basic shapes shape-outside

shape-outside

The shape-outside property controls how content will wrap around a floated element’s bounding-box. Typically this is so that text can reflow over a shape such as a circle, ellipse or a polygon:

.element {  
  float: left;
  shape-outside: circle(50%);
  width: 200px;
  
…
Avatar of Robin Rendle
Robin Rendle on Jun 17, 2015 (Updated on Oct 1, 2020)

CSS-Tricks is powered by DigitalOcean.

Keep up to date on web dev

with our hand-crafted newsletter

DigitalOcean
  • About DO
  • Cloudways hosting
  • Legal stuff
  • Get free credit!
CSS-Tricks
  • Write for us!
  • Advertise with us
  • Contact us
Social
  • RSS Feeds
  • CodePen
  • Mastodon
  • X
Back to Top