Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

CSS update: Shapes from box values #33770

Merged
merged 2 commits into from
May 28, 2024
Merged

CSS update: Shapes from box values #33770

Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
7df39c4
CSS update: Shapes from box values
estelle May 27, 2024
f7ac5ae
Apply suggestions from code review
estelle May 27, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 8 additions & 8 deletions files/en-us/web/css/css_shapes/from_box_values/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,24 +6,24 @@ page-type: guide

{{CSSRef}}

A straightforward way to create a shape is to use a value from the CSS Box Model. This article explains how to do this.
A straightforward way to create a shape is to use a value from the [CSS Box Model](/en-US/docs/Web/CSS/CSS_box_model). This article explains how to do this.
estelle marked this conversation as resolved.
Show resolved Hide resolved

The [box values](https://drafts.csswg.org/css-shapes-1/#shapes-from-box-values) allowable as a shape value are:
The {{cssxref("box-edge")}} 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.
The `border-radius` values are also supported. This means you can have something on your page with a curved border, and your shape can follow the created shape.
estelle marked this conversation as resolved.
Show resolved Hide resolved

## 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.](box-model.png)

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.
By using box values for shapes, we can wrap our content around the edges defined by these values. In each of the examples below, I am using an element that has padding, a border, and a margin defined so that you can see the different ways in which content will flow.

### margin-box

Expand All @@ -35,9 +35,9 @@ In the example below, we have a circular purple item which is a {{htmlelement("d

### border-box

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 {{cssxref("border")}} property. In this case it will be the same as `padding-box`, the shape defined by the outside padding edge.
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 {{cssxref("border")}} property. In this case, it will be the same as `padding-box`, the shape defined by the outside padding edge.

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.
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 will follow it.

{{EmbedGHLiveSample("css-examples/shapes/box/border-box.html", '100%', 800)}}

Expand All @@ -49,15 +49,15 @@ The `padding-box` value defines the shape enclosed by the outside padding edge.

### 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.
The `content-box` value defines the shape enclosed by the outside content edge. Each corner radius of this box is the `border-radius` less the `border-width` and `padding`, or `0`, whichever is larger. This means that it is impossible to have a negative value here.

{{EmbedGHLiveSample("css-examples/shapes/box/content-box.html", '100%', 800)}}

## When to use 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.

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.
With just this basic technique, you can create some interesting effects. 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.

{{EmbedGHLiveSample("css-examples/shapes/box/bottom-margin-box.html", '100%', 800)}}

Expand Down