.foo {
border: 30px solid;
border-color: stripes(dodgerblue, skyblue) stripes(yellow, gold) stripes(lightgreen, limegreen) stripes(indianred, orange);
}
Sample rendering:
The same border colors with ''border-style: dotted'':
Corners
Corner Sizing: the 'border-radius' and 'border-*-radius' shorthand properties
Sizing The Corners Of One Side: The 'border-top-radius', 'border-right-radius', 'border-bottom-radius', 'border-left-radius', 'border-block-start-radius', 'border-block-end-radius', 'border-inline-start-radius', 'border-inline-end-radius' shorthands
Name: border-top-radius, border-right-radius, border-bottom-radius, border-left-radius, border-block-start-radius, border-block-end-radius, border-inline-start-radius, border-inline-end-radius Value: <>{1,2} [ / < >{1,2} ]? Initial: 0 Applies to: all elements (but see prose) Inherited: no Percentages: Refer to corresponding dimension of the border box. Computed value: see individual properties Animatable: see individual properties
The 'border-*-radius' shorthands set the two 'border-*-*-radius' longhand properties of the related side. If values are given before and after the slash, then the values before the slash set the horizontal radius and the values after the slash set the vertical radius. If there is no slash, then the values set both radii equally. The two values for the radii are given in the order top-left, top-right for 'border-top-radius', top-right, bottom-right for 'border-right-radius', bottom-left, bottom-right for 'border-bottom-radius', top-left, bottom-left for 'border-left-radius', start-start, start-end for 'border-block-start-radius', end-start, end-end for 'border-block-end-radius' start-start, end-start for 'border-inline-start-radius', and start-end, end-end for 'border-inline-end-radius'. If the second value is omitted it is copied from the first.
Should the physical values all be defined as left to right and top to bottom and the logical ones as start to end or should they follow the clockwise order of ''border-radius''?
Sizing All Corners At Once: The 'border-radius' shorthand
Name: border-radius Value: <See [[CSS3BG]].>{1,4} [ / < >{1,4} ]? Initial: 0 Applies to: all elements, except table element when 'border-collapse' is ''collapse'' Inherited: no Animation type: see individual properties
Corner Shaping: the 'corner-shape' property
Name: corner-shape
Value: [ round | angle ]{1,4}
Initial: round
Applies to: all elements, except table element when 'border-collapse' is ''collapse''
Inherited: no
Animation type: discrete
By default, non-zero border-radii define
a quarter-ellipse that rounds the affected corners.
However in some cases, other corner shapes are desired.
The 'corner-shape' property specifies a reinterpretation of the radii
to define other corner shapes.
- ''round''
- Border radii define a convex elliptical curve at the corner.
- ''angle''
- Border radii define a diagonal slice at the corner.
a {
border-radius: .3em .8em .8em .3em / .3em 50% 50% .3em;
corner-shape: round angle angle round;
padding: .5em 1em .5em .5em;
}
How to allow custom corners? Perhaps a ''path()'' function? Or a ''cubic-bezier()''? Something else?
Corner Shape and Size: the 'corners' shorthand
Name: corners Value: <<'corner-shape'>> || <<'border-radius'>>The 'corners' shorthand sets 'corner-shape' and 'border-radius' in the same declaration. If either is omitted, it is reset to its initial value.
corners: angle 50%;In UAs that don't support 'corner-shape', the declaration is ignored (falls back to a rectangle).
border-radius: 0.25em 0.25em 0 0; corners: angle 0.25em 0.25em 0 0 / 50% 50% 0 0;
Partial borders
CSS borders traditionally cover an entire border edge. Sometimes, however, it can be useful to hide some parts of the border.
Here are two proposals for doing this: the second one is from GCPM, the first one is an attempt to recast it more readably. The names are terrible, known problem, proposals accepted. There is a problem with conceiving this as clipping: if you have dotted borders, you want whole dots always, not parts of dots. So it should be a drawing limit, not a clip.
Partial Borders: the 'border-limit' property
Name: border-limit Value: all | [ sides | corners ] <>? | [ top | right | bottom | left ] < > Initial: round Applies to: all elements, except table element when 'border-collapse' is ''collapse'' Inherited: no Percentages: relative to border-box Animation type: discrete
By default, the entire border is drawn. However, border rendering can be limited to only part of a border. The keyword specifies which part, and the length or percentage specifies how much.
- ''sides''
- The sides are drawn up to but not including the corners (as defined by the border radii). A length or percentage is measured from the center of each side: ''50%'' draws the middle 50% of the border; by default the entire side is drawn.
- ''corners''
- The corners are drawn plus the specified distance into the sides if specified. A length is measured from the closest edge of the corner area. A percentage is measured from the absolute corner of the border box.
- ''left''
- ''right''
- For the left and right (vertical) sides, draws the entire side and corner. For the top and bottom (horizontal) sides, draws the left/right portion, as specified. Distances are measured as for ''corners''.
- ''top''
- ''bottom''
- For the top and bottom (horizontal) sides, draws the entire side and corner. For the left and right (vertical) sides, draws the top/bottom portion, as specified. Distances are measured as for ''corners''.
The following example draws only the middle 50% of the sides.
box { border: solid; border-parts: sides 50% }
The following example draws only the curved parts of the corners.
box { border: solid; border-radius: 1em 2em; border-parts: corners; }
The following example draws only the left 4em of the top border.
box { border-top: solid; border-parts: left 4em; }
The following example draws only the first 10px of each corner:
box { border: solid; border-parts: corners 10px; }
The following example draws the curved part of the corner plus 5px along the sides:
box { border: solid; border-radius: 5px; border-shape: round; border-parts: corners 5px; }
The following example draws the curved part of the corner and all of the side except the middle 40%.
box { border: solid; border-radius: 5px; border-shape: round; border-parts: corners 30%; }
The 'border-clip' properties
Name: border-clip, border-clip-top, border-clip-right, border-clip-bottom, border-clip-left Value: normal | [ <> | < > ]+ Initial: normal Inherited: no Percentages: refer to length of border-edge side Computed value: ''border-clip/normal'', or a list consisting of absolute lengths, or percentages as specified Animation type: by computed value
Should these properties be simplified to only accept normal | <?
These properties split their respective borders into parts along the border edge. The first part is visible, the second is invisible, the third part is visible, etc. Parts can be specified with lengths, percentages, or flexible lengths (expressed by the ''fr'' unit, as per [[CSS3GRID]]). The ''border-clip/normal'' value means that the border is not split, but shown normally.
'border-clip' is a shorthand property for the four individual properties.
If the listed parts are shorter than the border, any remaining border is split proportionally between the specified flexible lengths. If there are no flexible lengths, the behavior is as if ''1fr'' had been specified at the end of the list.
If the listed parts are longer than the border, the specified parts will be shown in full until the end of the border. In this case, all flexible lengths will be zero.
For horizontal borders, parts are listed from left to right. For vertical borders, parts are listed from top to bottom.
The exact border parts are determined by laying out the specified border parts with all flexible lengths initially set to zero. Any remaining border is split proportionally between the flexible lengths specified.
border-clip: 10px 1fr 10px;
border-clip-top: 10px 1fr 10px; border-clip-bottom: 10px 1fr 10px; border-clip-right: 5px 1fr 5px; border-clip-left: 5px 1fr 5px;
By making the first part have zero length, the inverse border of the previous example can easily be created:
border-clip-top: 0 10px 1fr 10px; border-clip-bottom: 0 10px 1fr 10px; border-clip-right: 0 5px 1fr 5px; border-clip-left: 0 5px 1fr 5px;
border: thin solid black; border-clip: 0 1fr; /* hide borders */ border-clip-top: 10px 1fr 10px; /* make certain borders visible */ border-clip-bottom: 10px 1fr 10px;
border-top: thin solid black; border-bottom: thin solid black; border-clip-top: 10px; border-clip-bottom: 10px;
border-top: thin solid black; border-clip: 10px;
This rendering:
A sentence consists of words¹.
¹ Most often.
@footnote {
border-top: thin solid black;
border-clip: 4em;
}
border: 2px solid black; border-top-parts: repeat(10px 10px);
In this example, the repeat pattern is shown five times and there is, by coincidence, no remaining border.
border: 2px solid black; border-top-parts: repeat(10px 10px);
In this example, the repeat pattern is shown five times. The box in this example is slightly wider than the box in the previous example. The remaining border is taken up by a flexible length, as if this code had been specified:
border: 2px solid black; border-top-parts: repeat(10px 10px) 1fr;
The fragment is shown in red for illustrative purposes; it should be shown in black by a compliant UA.
border: 4px solid black; border-top-parts: 40px 20px 0 1fr repeat(20px 20px) 0 1fr 40px;
In this example, there will be a visible 40px border part on each end of the top border. Inside the 40px border parts, there will be an invisible border part of at least 20px. Inside these invisible border parts, there will be visible border parts, each 20px long with 20px invisible border parts between them.
The fragments are shown in red for illustrative purposes; they should not be visible in compliant UAs.
border: 4px solid black; border-top-parts: 40px 20px 0 1fr 20px 20px 0 1fr 40px;
In this example, there will be a visible 40px border part on each end of the top border. Inside the 40px border parts, there will be an invisible border part of at least 20px. Inside these invisible border parts, there will be visible border parts, each 20px long with 20px invisible border parts between them.
The fragments are shown in red for illustrative purposes; they should not be visible in compliant UAs.
border: 4px solid black; border-clip-top: 3fr 10px 2fr 10px 1fr 10px 10px 10px 1fr 10px 2fr 10px 3fr;
All but one of the visible border parts are represented as flexible lengths in this example. The length of these border parts will change when the width of the element changes. Here is one rendering where 1fr ends up being 10px:
Here is another rendering where 1fr ends up being 30px:
The fragments are shown in red for illustrative purposes; they should be black in compliant UAs.
Drop Shadows
Coloring shadows: the 'box-shadow-color' property
Name: box-shadow-color Value: <># Initial: currentcolor Applies to: all elements Inherited: no Percentages: N/A Computed value: list, each item a computed color Animatable: by computed value
The 'box-shadow-color' property defines one or more drop shadow colors. The property accepts a comma-separated list of shadow colors.
See the section [[css-backgrounds-3#shadow-layers|“Layering, Layout, and Other Details”]] for how 'box-shadow-color' interacts with other comma-separated drop shadow properties to form each drop shadow layer.
Offsetting shadows: the 'box-shadow-offset' property
Name: box-shadow-offset Value: [ none | <>{2} ]# Initial: none Applies to: all elements Inherited: no Percentages: N/A Computed value: either 'none' or a list, each item a pair of offsets (horizontal and vertical) from the element‘s box Animatable: by computed value
The 'box-shadow-offset' property defines one or more drop shadow offsets.
The property accepts a comma-separated list of horizontal and vertical offset pairs,
where both values are described as < See the section [[css-backgrounds-3#shadow-layers|“Layering, Layout, and
Other Details”]] for how 'box-shadow-offset' interacts with other
comma-separated drop shadow properties to form each drop shadow
layer.
The 'box-shadow-blur' property defines one or more blur radii for drop shadows.
The property accepts a comma-separated list of < Negative values are invalid.
If the blur value is zero, the shadow’s edge is sharp.
Otherwise, the larger the value, the more the shadow’s edge is blurred.
See [[css-backgrounds-3#shadow-blur|Shadow Blurring]], below.
See the section [[css-backgrounds-3#shadow-layers|“Layering, Layout, and
Other Details”]] for how 'box-shadow-blur' interacts with other
comma-separated drop shadow properties to form each drop shadow
layer.
The 'box-shadow-spread' property defines one or more spread distances for drop shadows.
The property accepts a comma-separated list of < Positive values cause the shadow to expand in all directions by the specified radius.
Negative values cause the shadow to contract.
See [[css-backgrounds-3#shadow-shape|Shadow Shape]], below.
Note that for inner shadows,
expanding the shadow (creating more shadow area)
means contracting the shadow’s perimeter shape.
See the section [[css-backgrounds-3#shadow-layers|“Layering, Layout, and
Other Details”]] for how 'box-shadow-spread' interacts with other
comma-separated drop shadow properties to form each drop shadow
layer.
The 'box-shadow-position' property defines one or more drop shadow positions.
The property accepts a comma-separated list of 'outset' and 'inset' keywords.
See the section [[css-backgrounds-3#shadow-layers|“Layering, Layout, and
Other Details”]] for how 'box-shadow-position' interacts with other
comma-separated drop shadow properties to form each drop shadow
layer.
The 'box-shadow' property attaches one or more drop-shadows to the box.
The property accepts either the ''box-shadow-offset/none'' value, which indicates no shadows,
or a comma-separated list of shadows, ordered front to back.
Each shadow is given as a < Additions are a work in progress... here's what we're planning to add. :)
In addition to the many contributors to the [[CSS1]], [[CSS21]],
and [[CSS3BG]] predecessors to this module,
the editors would like to thank
Tab Atkins,
and Håkon Wium Lie
for their suggestions and feedback specifically for this Level 4.
Blurring shadows: the 'box-shadow-blur' property
Name: box-shadow-blur
Value: <
Spreading shadows: the 'box-shadow-spread' property
Name: box-shadow-spread
Value: <
Spreading shadows: the 'box-shadow-position' property
Name: box-shadow-position
Value: [ outset | inset ]#
Initial: outset
Applies to: all elements
Inherited: no
Percentages: N/A
Computed value: list, each item one of the keywords
Animatable: by computed value
Drop Shadows Shorthand: the 'box-shadow' property
Name: box-shadow
Value: <
<
Changes
Additions Since Level 3
Acknowledgments