<template>
<div class="a">
I have a border, an outline, AND a box shadow! Amazing, isn't it?
</div>
<div class="b">
This box has a border on the bottom side.
</div>
<div class="c">
<p>This is a box with a border around it.
Note which side of the box is
<span class="redtext">red</span>.</p>
</div>
<div class="d">
<table>
<tr>
<td class="b1">none</td>
<td class="b2">hidden</td>
<td class="b3">dotted</td>
<td class="b4">dashed</td>
</tr>
<tr>
<td class="b5">solid</td>
<td class="b6">double</td>
<td class="b7">groove</td>
<td class="b8">ridge</td>
</tr>
<tr>
<td class="b9">inset</td>
<td class="b10">outset</td>
</tr>
</table>
</div>
<div class="e">
<div>Element 1</div>
<div>Element 2</div>
</div>
</template>
<script setup>
</script>
<style scoped>
.a {
border: 0.5rem outset pink;
outline: 0.5rem solid khaki;
box-shadow: 0 0 0 2rem skyblue;
font: bold 1rem sans-serif;
margin: 2rem;
padding: 1rem;
outline-offset: 0.5rem;
}
.b {
border-bottom: 4px dashed blue;
background-color: gold;
height: 100px;
width: 100px;
font-weight: bold;
text-align: center;
}
.c {
border: solid 0.3em gold;
border-bottom-color: red;
width: auto;
}
.c .redtext {
color: red;
}
.d table {
border-width: 3px;
background-color: #52E385;
}
.d tr, .d td {
padding: 3px;
}
.d .b1 {
border-bottom-style: none;
}
.d .b2 {
border-bottom-style: hidden;
}
.d .b3 {
border-bottom-style: dotted;
}
.d .b4 {
border-bottom-style: dashed;
}
.d .b5 {
border-bottom-style: solid;
}
.d .b6 {
border-bottom-style: double;
}
.d .b7 {
border-bottom-style: groove;
}
.d .b8 {
border-bottom-style: ridge;
}
.d .b9 {
border-bottom-style: inset;
}
.d .b10 {
border-bottom-style: outset;
}
.e div {
border: 1px solid red;
margin: 1em 0;
}
div:nth-child(1) {
border-bottom-width: thick;
}
div:nth-child(2) {
border-bottom-width: 2em;
}
</style>