如何在边框窗格底部的每个角落放置两个按钮

<div class="border-pane">
  <button id="top-left-btn">按钮1</button>
  <button id="top-right-btn">按钮2</button>
  <button id="bottom-left-btn">按钮3</button>
  <button id="bottom-right-btn">按钮4</button>
</div>

.border-pane {
  position: relative;
  width: 400px;
  height: 200px;
  border: 1px solid #ccc;
}

button {
  position: absolute;
  width: 80px;
  height: 30px;
  background-color: #f0f0f0;
  border: none;
  cursor: pointer;
}

#top-left-btn {
  top: 10px;
  left: 10px;
}

#top-right-btn {
  top: 10px;
  right: 10px;
}

#bottom-left-btn {
  bottom: 10px;
  left: 10px;
}

#bottom-right-btn {
  bottom: 10px;
  right: 10px;
}

document.getElementById("top-left-btn").addEventListener("click", function() {
  // 处理按钮1的点击事件
});

document.getElementById("top-right-btn").addEventListener("click", function() {
  // 处理按钮2的点击事件
});

document.getElementById("bottom-left-btn").addEventListener("click", function() {
  // 处理按钮3的点击事件
});

document.getElementById("bottom-right-btn").addEventListener("click", function() {
  // 处理按钮4的点击事件
});