let’s go step-by-step through all the CSS border-style values with explanations and working examples.
1. Overview
The border-style property defines the pattern or design of a border.
It can be applied:
- to all sides:
border-style: solid; - or individually:
border-top-style: dotted;
Syntax:
border-style: style; /* all sides */
border-style: top right bottom left; /* individual sides */
2. Border Style Types
(a) solid
A single, unbroken line.
border: 3px solid blue;
(b) dotted
A line made of round dots.
border: 3px dotted red;
(c) dashed
A line made of short dashes.
border: 3px dashed green;
(d) double
Two parallel lines. Border width must be at least 3px for visible separation.
border: 5px double purple;
(e) groove
A carved/3D groove effect. Uses the border color for shading.
border: 6px groove brown;
(f) ridge
The opposite of groove — raised/3D ridge effect.
border: 6px ridge orange;
(g) inset
Gives the element an “embedded” look (as if pushed into the screen).
border: 4px inset gray;
(h) outset
Makes the element appear “coming out” from the page.
border: 4px outset teal;
(i) none
No border (same as setting border-width: 0).
border: none;
(j) hidden
Similar to none, but used in table border conflict resolution.
border: hidden;
3. Live Example
<!DOCTYPE html>
<html>
<head>
<title>CSS Border Styles</title>
<style>
div {
width: 200px;
padding: 10px;
margin: 10px;
}
.solid { border: 3px solid blue; }
.dotted { border: 3px dotted red; }
.dashed { border: 3px dashed green; }
.double { border: 5px double purple; }
.groove { border: 6px groove brown; }
.ridge { border: 6px ridge orange; }
.inset { border: 4px inset gray; }
.outset { border: 4px outset teal; }
.none { border: none; background: #eee; }
.hidden { border: hidden; background: #eee; }
</style>
</head>
<body>
<div class="solid">Solid Border</div>
<div class="dotted">Dotted Border</div>
<div class="dashed">Dashed Border</div>
<div class="double">Double Border</div>
<div class="groove">Groove Border</div>
<div class="ridge">Ridge Border</div>
<div class="inset">Inset Border</div>
<div class="outset">Outset Border</div>
<div class="none">No Border (none)</div>
<div class="hidden">Hidden Border (hidden)</div>
</body>
</html>
Turn this into a live playground :
here’s your Interactive CSS Border Styles Playground 🎨
It combines all the styles you mentioned (dotted, dashed, solid, double, groove, ridge, inset, outset, none, hidden) and lets you control width, color, and border-radius live.
<!DOCTYPE html>
<html>
<head>
<title>CSS Border Styles Playground</title>
<style>
body {
font-family: Arial, sans-serif;
background: #f4f4f4;
text-align: center;
padding: 20px;
}
.preview {
width: 250px;
height: 150px;
margin: 20px auto;
background: white;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s ease;
}
.controls {
background: #fff;
padding: 15px;
border-radius: 8px;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
display: inline-block;
text-align: left;
}
label {
font-weight: bold;
}
.code-box {
background: #222;
color: #0f0;
padding: 10px;
margin-top: 15px;
font-family: monospace;
border-radius: 5px;
text-align: left;
}
</style>
</head>
<body>
<h1>🎯 CSS Border Styles Playground</h1>
<div class="preview" id="preview-box">Preview</div>
<div class="controls">
<p>
<label>Border Style:</label>
<select id="style">
<option value="solid">Solid</option>
<option value="dotted">Dotted</option>
<option value="dashed">Dashed</option>
<option value="double">Double</option>
<option value="groove">Groove</option>
<option value="ridge">Ridge</option>
<option value="inset">Inset</option>
<option value="outset">Outset</option>
<option value="none">None</option>
<option value="hidden">Hidden</option>
</select>
</p>
<p>
<label>Border Width:</label>
<input type="range" id="width" min="0" max="20" value="4">
<span id="width-val">4px</span>
</p>
<p>
<label>Border Color:</label>
<input type="color" id="color" value="#0000ff">
</p>
<p>
<label>Border Radius:</label>
<input type="range" id="radius" min="0" max="100" value="12">
<span id="radius-val">12px</span>
</p>
</div>
<div class="code-box" id="css-code">
border: 4px solid #0000ff;<br>
border-radius: 12px;
</div>
<script>
const preview = document.getElementById("preview-box");
const styleInput = document.getElementById("style");
const widthInput = document.getElementById("width");
const colorInput = document.getElementById("color");
const radiusInput = document.getElementById("radius");
const widthVal = document.getElementById("width-val");
const radiusVal = document.getElementById("radius-val");
const cssCode = document.getElementById("css-code");
function updateBorder() {
let s = styleInput.value;
let w = widthInput.value + "px";
let c = colorInput.value;
let r = radiusInput.value + "px";
preview.style.borderStyle = s;
preview.style.borderWidth = w;
preview.style.borderColor = c;
preview.style.borderRadius = r;
widthVal.textContent = w;
radiusVal.textContent = r;
cssCode.innerHTML =
`border: ${w} ${s} ${c};<br>border-radius: ${r};`;
}
document.querySelectorAll("input, select").forEach(el => {
el.addEventListener("input", updateBorder);
});
updateBorder();
</script>
</body>
</html>
How to use it
- Save this as
border-playground.html - Open in your browser
- Change style, width, color, and radius — preview updates instantly
- Copy the generated CSS from the bottom
