Shapes from box values

A straightforward way to create a shape is to use a value from the CSS Box Model. This article explains how to do this.


The box values allowable as a shape value are:

  • content-box
  • padding-box
  • border-box
  • margin-box

The border-radius values are also supported, this means that you can have something in your page with a curved border, and your shape can follow the created shape.

CSS box model

The values listed above correspond to the various parts of the CSS Box Model. A box in CSS has content, padding, border, and margin.

The Box Model consists of the margin, border, padding and content boxes.

By using Box Values for Shapes we can wrap our content around the edges defined by these values. In all of the examples below I am using an element which has padding, a border, and a margin defined in order that you can see the different ways in which content will flow.


The margin-box is the shape defined by the outside margin edge and includes the corner radius of the shape, should border-radius have been used in defining the element.

In the example below, we have a circular purple item which is a <div> with a height, width, and background colour. The border-radius property has been used to create a circle by setting border-radius: 50%. As the element has a margin, you can see that the content is flowing around the circular shape and the margin applied to it.
在下面的示例中,我们有一个圆形的紫色项,它是一个带有高度、宽度和背景色的<div>项。border radius属性已用于通过设置border radius:50%创建圆。由于元素有一个边距,您可以看到内容围绕圆形流动,并且应用于圆形的边距。


The border-box value is the shape defined by the outside border edge. This shape follows all of the normal border radius shaping rules for the outside of the border. You still have a border, even if you have not used the CSS border property. In this case it will be the same as padding-box, the shape defined by the outside padding edge.
边框值是由外部边框边缘定义的形状。此形状遵循边框外部的所有常规边框半径形状规则。即使没有使用css border属性,您仍然有边框。在这种情况下,它将与由外部填充边定义的形状padding box相同。

In the example below you can see how the text now follows the line created by the border. Change the border size and the content follows it.


The padding-box value defines the shape enclosed by the outside padding edge. This shape follows all of the normal border radius shaping rules for the inside of the border. If you have no padding then padding-box is the same as content-box.


The content-box value defines the shape enclosed by the outside content edge. Each corner radius of this box is the larger of 0 or border-radius − border-width − padding. This Means that it is impossible to have a negative value here.
内容框值定义由外部内容边缘包围的形状。此框的每个角半径都是0或border radius-border width-padding中的较大值。这意味着这里不可能有负值。

When to use the box values

Using box values is a simple way to create shapes, however this is by nature only going to work with very simple shapes that can be defined using the well-supported border-radius property. The examples shown above show one such use case. You can create a circular shape using border-radius and then curve text around it.
使用框值是创建形状的一种简单方法,但这本质上只适用于可以使用受良好支持的border radius属性定义的非常简单的形状。上面显示的示例显示了一个这样的用例。可以使用边框半径创建圆形,然后围绕它弯曲文本。

You can create some interesting effects however with just this simple technique. In my final example of this section, I have floated two elements left and right, giving each a border-radius of 100% in the direction closest to the text.

For more complex shapes you will need to use one of the basic shapes as a value, or define your Shape from an image as covered in other guides in this section.