<!DOCTYPE html>
<html title="Border Test Simple">
<head>
<style>
body {
font-family: Arial, sans-serif;
padding: 10mm;
}
h1 {
color: #333;
margin-bottom: 20px;
}
.test-box {
width: 200px;
height: 100px;
margin: 20px 0;
}
.border-solid {
border: 3px solid #3498db;
}
.border-dashed {
border: 3px dashed #e74c3c;
}
.border-dotted {
border: 3px dotted #27ae60;
}
.border-double {
border: 6px double #9b59b6;
}
.border-radius-small {
border: 2px solid #2c3e50;
border-radius: 5px;
}
.border-radius-medium {
border: 2px solid #2c3e50;
border-radius: 15px;
}
.border-radius-large {
border: 2px solid #2c3e50;
border-radius: 30px;
}
.border-multicolor {
border-top: 4px solid #e74c3c;
border-right: 4px solid #3498db;
border-bottom: 4px solid #27ae60;
border-left: 4px solid #f39c12;
}
.border-with-bg {
background-color: #ecf0f1;
border: 3px solid #2c3e50;
border-radius: 10px;
}
.label {
font-size: 12px;
padding: 40px 10px 10px 10px;
}
</style>
</head>
<body>
<h1>Border Rendering Test</h1>
<h2>1. Solid Border</h2>
<div class="test-box border-solid">
<div class="label">Solid Border (blue)</div>
</div>
<h2>2. Dashed Border</h2>
<div class="test-box border-dashed">
<div class="label">Dashed Border (red)</div>
</div>
<h2>3. Dotted Border</h2>
<div class="test-box border-dotted">
<div class="label">Dotted Border (green)</div>
</div>
<h2>4. Double Border</h2>
<div class="test-box border-double">
<div class="label">Double Border (purple)</div>
</div>
<h2>5. Border Radius Small (5px)</h2>
<div class="test-box border-radius-small">
<div class="label">5px radius</div>
</div>
<h2>6. Border Radius Medium (15px)</h2>
<div class="test-box border-radius-medium">
<div class="label">15px radius</div>
</div>
<h2>7. Border Radius Large (30px)</h2>
<div class="test-box border-radius-large">
<div class="label">30px radius</div>
</div>
<h2>8. Multi-color Borders</h2>
<div class="test-box border-multicolor">
<div class="label">4 different colors</div>
</div>
<h2>9. Background + Border + Radius</h2>
<div class="test-box border-with-bg">
<div class="label">Combined styling</div>
</div>
</body>
</html>