piskel/src/css/pensize.css

.pen-size-container {
  overflow: hidden;
  padding: 5px 5px;
}

.pen-size-option {
  float: left;
  box-sizing: border-box;
  width: 20px;
  height: 20px;
  margin-right: 2px;
  border-style: solid;
  border-width: 2px;
  border-color: #444;
  cursor: pointer;
}

.pen-size-option[data-size='1'] {
  padding: 6px;
}
.pen-size-option[data-size='2'] {
  padding: 5px;
}
.pen-size-option[data-size='3'] {
  padding: 4px;
}
.pen-size-option[data-size='4'] {
  padding: 3px;
}

.pen-size-option:before {
  content: '';
  width: 100%;
  height: 100%;
  background-color: white;
  display: block;
}

.pen-size-option:hover {
  border-color: #888;
}

.pen-size-option.selected:before {
  background-color: gold;
}

.pen-size-option.selected {
  border-color: gold;
}

.pen-size-option.labeled:before {
  content: attr(real-pen-size);
}