element-ui/examples/docs/en-US/border.md

Border

We standardize the borders that can be used in buttons, cards, pop-ups and other components.

Border

There are few border styles to choose.

Name	Thickness	Demo
Solid	1px
Dashed	2px

Radius

There are few radius styles to choose.

<div class="title">No Radius</div>
<div class="value">border-radius: 0px</div>
<div class="radius"></div>

<div class="title">Small Radius</div>
<div class="value">border-radius: {{borderRadiusSmall}}</div>
<div 
  class="radius" 
  :style="{ borderRadius: borderRadiusSmall }"
></div>

<div class="title">Large Radius</div>
<div class="value">border-radius: {{borderRadiusBase}}</div>
<div 
  class="radius"
  :style="{ borderRadius: borderRadiusBase }"
></div>

<div class="title">Round Radius</div>
<div class="value">border-radius: 30px</div>
<div class="radius radius-30"></div>

Shadow

There are few shadow styles to choose.

<div class="demo-shadow" :style="{ boxShadow: boxShadowBase }"

Basic Shadow box-shadow: {{boxShadowBase}}

<div class="demo-shadow" :style="{ boxShadow: boxShadowLight }"

Light Shadow box-shadow: {{boxShadowLight}}