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: all
		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.

''all''

The entire border is drawn.

''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''.

			div {
				border: solid;
				border-limit: sides 50%;
			}
		

			div {
				border: solid;
				border-radius: 1em 2em;
				border-limit: corners;
			}
		

			div {
				border-top: solid;
				border-limit: left 4em;
			}
		

			div {
				border: solid;
				border-limit: corners 10px;
			}
		

			div {
				border: solid;
				border-radius: 5px;
				border-limit: corners 5px;
			}
		

			div {
				border: solid;
				border-radius: 5px;
				border-limit: 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
	

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;
		

			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;
		

				A sentence consists of words¹.
			

				¹ Most often.
			

			@footnote {
				border-top: thin solid black;
				border-clip: 4em;
			}
		

			border: 4px solid black;
			border-clip-top: 40px 20px 0 1fr 20px 20px 0 1fr 40px;
		

			border: 4px solid black;
			border-clip-top: 3fr 10px 2fr 10px 1fr 10px 10px 10px 1fr 10px 2fr 10px 3fr;
		

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
		Animation type: 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: list, each item either ''box-shadow-offset/none'' or a pair of offsets
			(horizontal and vertical) from the element‘s box
		Animation type: by computed value,
			treating ''box-shadow-offset/none'' as ''0 0''
			when interpolated with non-''box-shadow-offset/none'' values.
	

The 'box-shadow-offset' property defines one or more drop shadow offsets. The property accepts a comma-separated list. Each item in that list can either be the ''box-shadow-offset/none'' value, which indicates no shadow, or a pair of horizontal and vertical offsets, where both values are described as <> values.

none

The shadow will not be rendered. The values of other box shadow properties corresponding to this shadow have no effect.

1st <>

Specifies the horizontal offset of the shadow. A positive value draws a shadow that is offset to the right of the box, a negative length to the left.

2nd <>

Specifies the vertical offset of the shadow. A positive value offsets the shadow down, a negative one up.

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.

Blurring shadows: the 'box-shadow-blur' property

		Name: box-shadow-blur
		Value: <>#
		Initial: 0
		Applies to: all elements
		Inherited: no
		Percentages: N/A
		Computed value: list, each item a <>
		Animation type: by computed value
	

The 'box-shadow-blur' property defines one or more blur radii for drop shadows. The property accepts a comma-separated list of <> values.

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.

Spreading shadows: the 'box-shadow-spread' property

		Name: box-shadow-spread
		Value: <>#
		Initial: 0
		Applies to: all elements
		Inherited: no
		Percentages: N/A
		Computed value: list, each item a <>
		Animation type: by computed value
	

The 'box-shadow-spread' property defines one or more spread distances for drop shadows. The property accepts a comma-separated list of <> values.

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.

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
		Animation type: by computed value
	

The 'box-shadow-position' property defines one or more drop shadow positions. The property accepts a comma-separated list of ''box-shadow-position/outset'' and ''box-shadow-position/inset'' keywords.

outset

Causes the drop shadow to be an outer box-shadow. That means, one that shadows the box onto the canvas, as if it were lifted above the canvas.

inset

Causes the drop shadow to be an inner box-shadow. That means, one that shadows the canvas onto the box, as if the box were cut out of the canvas and shifted behind it.

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.

Drop Shadows Shorthand: the 'box-shadow' property

		Name: box-shadow
		Value: <>#
		Initial: none
		Applies to: all elements
		Inherited: no
		Percentages: N/A
		Computed value: see individual properties
		Animation type: see individual properties
	

The 'box-shadow' property attaches one or more drop-shadows to the box. The property accepts a comma-separated list of shadows, ordered front to back.

Each shadow is given as a <>, outlining the 'box-shadow-offset', and optional values for the 'box-shadow-blur', 'box-shadow-spread', 'box-shadow-color', and 'box-shadow-position'. Omitted lengths are ''0''; omitted colors default to ''transparent'' when the specified offset is ''box-shadow-offset/none'' and to ''currentcolor'' otherwise.

	<> = <<'box-shadow-color'>>? && [ <<'box-shadow-offset'>> [ <<'box-shadow-blur'>> <<'box-shadow-spread'>>? ]? ] && <<'box-shadow-position'>>?

Layering, Layout, and Other Details

The shadow effects are applied front-to-back: the first shadow is on top and the others are layered behind. Shadows do not influence layout and may overlap (or be overlapped by) other boxes and text or their shadows. In terms of stacking contexts and the painting order, the outer box-shadows of an element are drawn immediately below the background of that element, and the inner shadows of an element are drawn immediately above the background of that element (below the borders and border image, if any).

Unless otherwise specified, drop shadows are only applied to the [=principal box=]. If the affected box has multiple fragments, the shadows are applied as specified in 'box-decoration-break'.

Shadows do not trigger scrolling or increase the size of the scrollable area.

Outer shadows have no effect on internal table elements in the collapsing border model. If a shadow is defined for single border edge in the collapsing border model that has multiple border thicknesses (e.g. an outer shadow on a table where one row has thicker borders than the others, or an inner shadow on a rowspanning table cell that adjoins cells with different border thicknesses), the exact position and rendering of its shadows are undefined.

Border Shaping

The 'border-shape' property

		Name: border-shape
		Value: none | [ <> <>?]{1,2}
		Initial: none
		Applies to: all elements
		Inherited: no
		Percentages: relative to the given <>, or to [=border box=] if not given.
		Computed value: list, each item a computed color
		Animation type: by computed value