00040.【CSS】演示了border-width的使用

<template>
  <div>
    <p id="sval">
      one value: 6px wide border on all 4 sides</p>
    <p id="bival">
      two different values: 2px wide top and bottom border, 10px wide right and left border</p>
    <p id="treval">
      three different values: 0.3em top, 9px bottom, and zero width right and left</p>
    <p id="fourval">
      four different values: "thin" top, "medium" right, "thick" bottom, and 1em right</p>
  </div>
</template>

<script setup>

</script>

<style scoped>
#sval {
  border: 6px ridge #cccccc;
}

#bival {
  border: solid red;
  border-width: 2px 10px;
}

#treval {
  border: dotted orange;
  border-width: 0.3em 0 9px
}

#fourval {
  border: solid lightgreen;
  border-width: thin medium thick 1em;
}

p {
  width: auto;
  margin: 0.25em;
  padding: 0.25em;
}
</style>