border-top

他の一括指定プロパティと同様に、 border-top は、一部の値が指定されていなくても、設定可能なプロパティをすべて設定します。指定されていないプロパティは既定値が設定されます。つまり・・・

border-top-style: dotted;
border-top: thick green;

・・・は、実際には以下と同じです・・・

border-top-style: dotted;
border-top: none thick green;

・・・そして、 border-top の前で設定された border-top-style の値は無視されます。 border-top-style の既定値は none なので、 border-style の部分の設定は境界線なしとなります。

このプロパティは以下の CSS プロパティの一括指定です。

• border-top-color
• border-top-style
• border-top-width

border-top: 1px;
border-top: 2px dotted;
border-top: medium dashed green;

/* グローバル値 */
border-top: inherit;
border-top: initial;
border-top: revert;
border-top: unset;

一括指定プロパティの 3 つの値は任意の順序で指定可能で、また、1 つまたは 2 つの値を省略することができます。

<br-width>

border-top-width を参照してください。

<br-style>

border-top-style を参照してください。

<color>

border-top-color を参照してください。

border-top = 
  <line-width>  ||
  <line-style>  ||
  <color>       

<line-width> = 
  <length [0,∞]>  |
  thin            |
  medium          |
  thick           

<line-style> = 
  none    |
  hidden  |
  dotted  |
  dashed  |
  solid   |
  double  |
  groove  |
  ridge   |
  inset   |
  outset  

<color> = 
  <absolute-color-base>  |
  currentcolor           |
  <system-color>         |
  <device-cmyk()>        

<absolute-color-base> = 
  <hex-color> (en-US)    |
  <named-color>  |
  transparent    |
  <rgb()>        |
  <rgba()>       |
  <hsl()>        |
  <hsla()>       |
  <hwb()>        |
  <lab()>        |
  <lch()>        |
  <oklab()>      |
  <oklch()>      |
  <color()>      

<device-cmyk()> = 
  device-cmyk( <cmyk-component>{4} [ / <alpha-value> ]? )  

<rgb()> = 
  rgb( [ <percentage> | none ]{3} [ / [ <alpha-value> | none ] ]? )  |
  rgb( [ <number> | none ]{3} [ / [ <alpha-value> | none ] ]? )  

<hsl()> = 
  hsl( [ <hue> | none ] [ <percentage> | none ] [ <percentage> | none ] [ / [ <alpha-value> | none ] ]? )  

<hwb()> = 
  hwb( [ <hue> | none ] [ <percentage> | none ] [ <percentage> | none ] [ / [ <alpha-value> | none ] ]? )  

<lab()> = 
  lab( [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ / [ <alpha-value> | none ] ]? )  

<lch()> = 
  lch( [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ <hue> | none ] [ / [ <alpha-value> | none ] ]? )  

<oklab()> = 
  oklab( [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ / [ <alpha-value> | none ] ]? )  

<oklch()> = 
  oklch( [ <percentage> | <number> | none ] [ <percentage> | <number> | none ] [ <hue> | none ] [ / [ <alpha-value> | none ] ]? )  

<color()> = 
  color( <colorspace-params> [ / [ <alpha-value> | none ] ]? )  

<cmyk-component> = 
  <number>      |
  <percentage>  

<alpha-value> = 
  <number>      |
  <percentage>  

<hue> = 
  <number>  |
  <angle>   |
  none      

<colorspace-params> = 
  <predefined-rgb-params>  |
  <xyz-params>             

<predefined-rgb-params> = 
  <predefined-rgb> [ <number> | <percentage> | none ]{3}  

<xyz-params> = 
  <xyz-space> [ <number> | none ]{3}  

<predefined-rgb> = 
  srgb          |
  srgb-linear   |
  display-p3    |
  a98-rgb       |
  prophoto-rgb  |
  rec2020       

<xyz-space> = 
  xyz      |
  xyz-d50  |
  xyz-d65  

HTML

<div>
  このボックスには上側に境界線があります。
</div>

CSS

div {
  border-top: 4px dashed blue;
  background-color: gold;
  height: 100px;
  width: 100px;
  font-weight: bold;
  text-align: center;
}

結果

• border
• border-block
• outline