<div class="padding">
  <span>Padding</span>
</div>

<div class="padding-logic">
  <span>Padding logic</span>
</div>

<div class="border">
  <span>Border</span>
</div>

<div class="border-logic">
  <span>Border logic</span>
</div>
.padding {
  padding: 20px 60px 80px 10px;
}

.padding-logic {
  padding-inline: 10px 60px;
  padding-block: 20px 80px;
}

.border {
  border-left: 10px solid #FFD54F;
  border-right: 10px solid #4DD0E1;
  writing-mode: vertical-rl;
}

.border-logic {
  border-inline-start: 10px solid #FFD54F;
  border-inline-end: 10px solid #4DD0E1;
    writing-mode: vertical-rl;
}

body {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

div {
  width: 400px;
  height: 150px;
  background-color: #BCAAA4;
  direction: rtl;
  box-sizing: border-box;
}

span {
  font-size: 3rem;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.