<small
  style="
  font-style: italic;
  margin-bottom: 25px;
  display: block;
  "
>To remove a border set the width to 0px</small>

<!-- table top -->
<div class="wcpt-editor-option-row" wcpt-model-key="[container] .wcpt-table">
  <label>Table top</label>
  <input type="text" wcpt-model-key="border-top-width" placeholder="thickness (px)">
  <select wcpt-model-key="border-top-style">
    <option value="solid">Solid</option>
    <option value="dashed">Dashed</option>
    <option value="dotted">Dotted</option>
    <option value="none">None</option>
  </select>
  <input type="text" wcpt-model-key="border-top-color" class="wcpt-color-picker" placeholder="color">
</div>

<!-- table right -->
<div class="wcpt-editor-option-row" wcpt-model-key="[container] .wcpt-table">
  <label>Table right</label>
  <input type="text" wcpt-model-key="border-right-width" placeholder="thickness (px)">
  <select wcpt-model-key="border-right-style">
    <option value="solid">Solid</option>
    <option value="dashed">Dashed</option>
    <option value="dotted">Dotted</option>
    <option value="none">None</option>
  </select>
  <input type="text" wcpt-model-key="border-right-color" class="wcpt-color-picker" placeholder="color">
</div>

<!-- table bottom -->
<div class="wcpt-editor-option-row" wcpt-model-key="[container] .wcpt-table">
  <label>Table bottom</label>
  <input type="text" wcpt-model-key="border-bottom-width" placeholder="thickness (px)">
  <select wcpt-model-key="border-bottom-style">
    <option value="solid">Solid</option>
    <option value="dashed">Dashed</option>
    <option value="dotted">Dotted</option>
    <option value="none">None</option>
  </select>
  <input type="text" wcpt-model-key="border-bottom-color" class="wcpt-color-picker" placeholder="color">
</div>

<!-- table left -->
<div class="wcpt-editor-option-row" wcpt-model-key="[container] .wcpt-table">
  <label>Table left</label>
  <input type="text" wcpt-model-key="border-left-width" placeholder="thickness (px)">
  <select wcpt-model-key="border-left-style">
    <option value="solid">Solid</option>
    <option value="dashed">Dashed</option>
    <option value="dotted">Dotted</option>
    <option value="none">None</option>
  </select>
  <input type="text" wcpt-model-key="border-left-color" class="wcpt-color-picker" placeholder="color">
</div>

<!-- heading row border top -->
<!-- <div class="wcpt-editor-option-row" wcpt-model-key="[container] .wcpt-heading-row">
  <label>Heading row top</label>
  <input type="text" wcpt-model-key="border-top-width" placeholder="thickness (px)">
  <select wcpt-model-key="border-top-style">
    <option value="solid">Solid</option>
    <option value="dashed">Dashed</option>
    <option value="dotted">Dotted</option>
    <option value="none">None</option>
  </select>
  <input type="text" wcpt-model-key="border-top-color" class="wcpt-color-picker" placeholder="color">
</div> -->

<!-- heading row border bottom -->
<div class="wcpt-editor-option-row" wcpt-model-key="[container] .wcpt-heading-row">
  <label>Heading row bottom</label>
  <input type="text" wcpt-model-key="border-bottom-width" placeholder="thickness (px)">
  <select wcpt-model-key="border-bottom-style">
    <option value="solid">Solid</option>
    <option value="dashed">Dashed</option>
    <option value="dotted">Dotted</option>
    <option value="none">None</option>
  </select>
  <input type="text" wcpt-model-key="border-bottom-color" class="wcpt-color-picker" placeholder="color">
</div>

<!-- between headings -->
<div class="wcpt-editor-option-row" wcpt-model-key="[container] thead th.wcpt-heading">
  <label>Between headings</label>
  <input type="text" wcpt-model-key="border-right-width" placeholder="thickness (px)">
  <select wcpt-model-key="border-right-style">
    <option value="solid">Solid</option>
    <option value="dashed">Dashed</option>
    <option value="dotted">Dotted</option>
    <option value="none">None</option>
  </select>
  <input type="text" wcpt-model-key="border-right-color" class="wcpt-color-picker" placeholder="color">
</div>

<!-- border between columns -->
<div class="wcpt-editor-option-row" wcpt-model-key="[container] .wcpt-cell">
  <label>Between columns</label>
  <input type="text" wcpt-model-key="border-right-width" placeholder="thickness (px)">
  <select wcpt-model-key="border-right-style">
    <option value="solid">Solid</option>
    <option value="dashed">Dashed</option>
    <option value="dotted">Dotted</option>
    <option value="none">None</option>
  </select>
  <input type="text" wcpt-model-key="border-right-color" class="wcpt-color-picker" placeholder="color">
</div>

<!-- border between rows -->
<div class="wcpt-editor-option-row" wcpt-model-key="[container] .wcpt-row">
  <label>Between rows</label>
  <input type="text" wcpt-model-key="border-bottom-width" placeholder="thickness (px)">
  <select wcpt-model-key="border-bottom-style">
    <option value="solid">Solid</option>
    <option value="dashed">Dashed</option>
    <option value="dotted">Dotted</option>
    <option value="none">None</option>
  </select>
  <input type="text" wcpt-model-key="border-bottom-color" class="wcpt-color-picker" placeholder="color">
</div>
