How to Inherit Only One Element of CSS Shorthand

Don't understand the statement individual inherited values are not possible with any shorthand property

As the note says, the following is invalid, even though intuitively it looks like it should set two of the corner radii to 0 and two of them to inherit:

border-radius:0 0 inherit inherit

This is because different shorthands have different grammars making it impossible for multiple inherit values to be mixed with other values. You wouldn't be able to determine which of the component properties should inherit, and you wouldn't be able to determine how to parse the remaining values that aren't inherit.

For example, while the above declaration looks easy enough, consider a background declaration:

background: inherit inherit #fff

There are two inherit keywords here, but the background shorthand contains a multitude of component properties with a complex grammar. It's impossible to determine which two of the longhands other than background-color should inherit. You have to tell the browser. Which means writing longhand declarations.

So, inherit is defined as a CSS-wide keyword that may only appear by itself in any property declaration, including shorthands. This eliminates any possible ambiguity regardless of whether the property is a longhand property accepting a single value, a longhand property accepting multiple values (such as border-top-left-radius or background-size), or a shorthand property.

See also: Leaving certain values unchanged when using CSS shorthand properties

Is there a way to specify initial values in css shorthands like padding?

No you can't use something like 'initial', you should use padding-top and padding-bottom.

Leaving certain values unchanged when using CSS shorthand properties

This isn't currently possible, unfortunately. You'll have to stick with assigning margin-top and margin-bottom respectively.

A shorthand property always changes the values of all its component (longhand) properties. Namely, any values omitted in a shorthand property will default to initial for their respective properties, unless resolved by cascading or by some other rules depending on the shorthand property. For example, the following results in auto margins on all sides except the bottom due to the margin-bottom longhand that appears after the shorthand:

#header {
    /* 
     * Note: this is short for margin: auto auto auto auto;
     * none of the longhands are set to initial! Different shorthands
     * have different rules, but a shorthand always changes the values
     * of all its longhands.
     */
    margin: auto;
    margin-bottom: 1em;
}

If there were separate shorthands for horizontal margins and vertical margins, you would be able to do this without having to worry about keeping specific longhand values, but no such shorthands exist at the moment.

As I mentioned in my comment, margin: 1em inherit is invalid as the CSS-wide keywords inherit (along with initial and others introduced in later standards) may only appear by themselves in property declarations, and this includes shorthand declarations. Even if margin: 1em inherit did work, the element would inherit horizontal margins from its parent element, and not from its own cascade (since that's not what inheritance means). It is not possible to retrieve a cascaded or specified value for a property on a given element, and being able to do this would almost certainly be error-prone due to the fact that the bottommost declaration from the most specific selector that contains the resolved value could be anywhere.

Is there a way to get child elements to inherit border-radius? CSS

Yes you can with inherit:

The inherit CSS keyword causes the element for which it is specified to take the computed value of the property from its parent element. It can be applied to any CSS property, including the CSS shorthand all.

section {
  border: 1px solid red;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  padding: 1rem;
  
}
div {
  border: 1px solid blue;
  border-radius: inherit;
}

<section><div>a</div></section>

border-color fails with inherit value

It fails because according to the definition of border-color, the keyword inherit is allowed only as the value of the property by itself, not as a component together with other values. This is what the description

    [ <color> | transparent ]{1,4} | inherit

means: you can have one to four components, each of which is either a color designation or the keyword transparen, or inherit as such.

There is an Opera bug involved, but the bug is that the value transparent inherit (and transparent transparent inherit) “works”, i.e. does what you mean, instead of doing what it must do by the specifications. According to CSS error processing rules, the declaration must be ignored when the value is syntactically malformed. (Chrome shares this bug with Opera, but Firefox and IE do the right thing.)

For example, to achieve what you mean by border-color: transparent inherit (namely setting top and bottom border color transparent, left and right border color inherited), you need to set individual border components one way or another in separate declarations, e.g.

div { border-color: red }span {  border-style: solid;  border-color: transparent;  border-left-color: inherit;  border-right-color: inherit;}

<div>  <span>Hello world</span></div>

---

Related Topics