Tabla 2x2 con bordes internos enteros o recortados y coloreados HTML y CSS

El HTML:

Insertar CODE, HTML o PHP:

<div class="tabla-landing">
  <div class="fila">
    <div class="columna borde-verde">
      <h2 class="subtitulo">Subtitulo 1</h2>
      <p class="descripcion">Descripcion 1</p>
</div>
    <div class="columna borde-rojo">
      <h2 class="subtitulo">Subtitulo 2</h2>
      <p class="descripcion">Descripcion 2</p>
    </div>
  </div>
  <div class="fila">
    <div class="columna borde-amarillo">
      <h2 class="subtitulo">Subtitulo 3</h2>
      <p class="descripcion">Descripcion 3</p>
    </div>
    <div class="columna borde-celeste">
      <h2 class="subtitulo">Subtitulo 4</h2>
      <p class="descripcion">Descripcion 4</p>
    </div>
  </div>
</div>

Este es el CSS que hay que usar para los bordes intercelda recortados de colores:

Insertar CODE, HTML o PHP:

/* tabla 2x2 con bordes internos recortados y de colores*/
.tabla-landing {
  display: table;
  width: 100%;
  table-layout: fixed;
  margin: 0 auto;
left: 50%;
margin-left: -50vw;
margin-right: -50vw;
max-width: 100vw;
position: relative;
right: 50%;
width: 100vw;
    border-collapse: separate;
}

.fila {
  display: table-row;
}

.columna {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
  padding: 10px;

}

.subtitulo {
  font-size: 1.5em;
  font-style: italic;
  text-decoration: underline;
}

.descripcion {
  font-size: 1em;
}

.borde-verde {
  border: none;
  position: relative;
}
.borde-verde:before,
.borde-verde:after {
  content: "";
  position: absolute;
  border: 10px solid green;
}
.borde-verde:before {
  bottom: 0;
  right: 0;
  width: 50%;
  height: 0;
  border-right: none;
  border-bottom: none;
}
.borde-verde:after {
  bottom: 0;
  right: 0;
  width: 0;
  height: 50%;
  border-left: none;
  border-top: none;
}

.borde-rojo {
  border: none;
  position: relative;
}
.borde-rojo:before,
.borde-rojo:after {
  content: "";
  position: absolute;
  border: 10px solid red;
}
.borde-rojo:before {
  bottom: 0;
  left: 0;
  width: 50%;
  height: 0;
  border-right: none;
  border-bottom: none;
}
.borde-rojo:after {
  bottom: 0;
  left: 0;
  width: 0;
  height: 50%;
  border-right: none;
  border-bottom: none;
}

.borde-amarillo {
  border: none;
  position: relative;
}
.borde-amarillo:before,
.borde-amarillo:after {
  content: "";
  position: absolute;
  border: 10px solid yellow;
}
.borde-amarillo:before {
  top: 0;
  right: 0;
  width: 50%;
  height: 0;
  border-left: none;
  border-top: none;
}
.borde-amarillo:after {
  top: 0;
  right: 0;
  width: 0;
  height: 50%;
  border-left: none;
  border-top: none;
}

.borde-celeste {
  border: none;
  position: relative;
}
.borde-celeste:before,
.borde-celeste:after {
  content: "";
  position: absolute;
  border: 10px solid lightblue;
}
.borde-celeste:before {
  top: 0;
  left: 0;
  width: 50%;
  height: 0;
  border-left: none;
  border-top: none;
}
.borde-celeste:after {
  top: 0;
  left: 0;
  width: 0;
  height: 50%;
  border-right: none;
  border-bottom: none;
}

Y este es el CSS para crear bordes intercelda completos y de colores

Insertar CODE, HTML o PHP:

/*tabla con bordes internos completos y de colores*/

.tabla-landing {
  display: table;
  width: 100%;
  table-layout: fixed;
  margin: 0 auto;
left: 50%;
margin-left: -50vw;
margin-right: -50vw;
max-width: 100vw;
position: relative;
right: 50%;
width: 100vw;
}

.fila {
  display: table-row;
}

.columna {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
  padding: 10px;
}

.subtitulo {
  font-size: 1.5em;
  font-style: italic;
  text-decoration: underline;
}

.descripcion {
  font-size: 1em;
}

.borde-verde {
  border: 10px solid green;
  border-left: none;
  border-top: none;
  text-align: right;
  vertical-align: bottom;
}

.borde-rojo {
  border: 10px solid red;
  border-right: none;
  border-top: none;
  text-align: left;
  vertical-align: bottom;
  color: red;
}

.borde-amarillo {
  border: 10px solid yellow;
  border-left: none;
    border-bottom: none;
  position: relative;
  text-align: right;
  vertical-align: top;
  color: yellow;
}

.borde-celeste {
  border: 10px solid lightblue;
  border-right: none;
    border-bottom: none;
  position: relative;
  text-align: left;
  vertical-align: top;
  color: lightblue;
}