here’s a complete and practical guide to CSS Borders so you can style them like a pro.
1. What are CSS Borders?
Borders are lines drawn around the padding and content of an element.
They can have a width, style, and color — plus radius for rounded corners.
2. Basic Border Properties
(a) border-width
Defines how thick the border is.
border-width: thin; /* keyword: thin, medium, thick */
border-width: 5px; /* exact size */
border-width: 5px 10px; /* vertical horizontal */
border-width: 5px 8px 10px 12px; /* top right bottom left */
(b) border-style
Defines the appearance of the border line.
border-style: solid; /* solid line */
border-style: dashed; /* dashed line */
border-style: dotted; /* dotted line */
border-style: double; /* double lines */
border-style: groove; /* 3D grooved */
border-style: ridge; /* 3D ridged */
border-style: inset; /* inset look */
border-style: outset; /* outset look */
border-style: none; /* no border */
(c) border-color
Defines the border color.
border-color: red;
border-color: #00ff00;
border-color: rgb(0, 0, 255);
You can set different colors for each side:
border-color: red green blue yellow;
3. Shorthand border
You can set width, style, and color in one go:
border: 3px solid blue;
4. Individual Side Borders
You can style each side separately:
border-top: 5px dashed red;
border-right: 3px solid green;
border-bottom: 2px dotted blue;
border-left: 4px double black;
5. Rounded Corners – border-radius
Controls the curvature of corners:
border-radius: 10px; /* rounded corners */
border-radius: 50%; /* circle if square element */
border-radius: 10px 20px; /* top-left/bottom-right, top-right/bottom-left */
border-radius: 10px 20px 30px 40px; /* individual corners */
6. Border Images – border-image
Lets you use an image for the border.
border: 10px solid transparent;
border-image: url(border.png) 30 round;
7. Outline vs Border
border→ part of the element’s box, affects layout.outline→ drawn outside the border, doesn’t take up space.
outline: 2px dashed orange;
8. Example
.box {
border: 4px solid teal;
border-radius: 12px;
background-color: #f0f0f0;
}
live CSS Borders playground :
here’s a live HTML + CSS + JavaScript Borders Playground you can run instantly in your browser.
It lets you adjust border width, style, color, radius and see changes in real time along with the generated CSS code.
<!DOCTYPE html>
<html>
<head>
<title>CSS Borders Playground</title>
<style>
body {
font-family: Arial, sans-serif;
background: #f4f4f4;
text-align: center;
padding: 20px;
}
.preview {
width: 200px;
height: 200px;
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;
}
</style>
</head>
<body>
<h1>🎨 CSS Borders Playground</h1>
<div class="preview" id="preview-box">Preview</div>
<div class="controls">
<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 Style:</label>
<select id="style">
<option value="solid">Solid</option>
<option value="dashed">Dashed</option>
<option value="dotted">Dotted</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>
</select>
</p>
<p>
<label>Border Color:</label>
<input type="color" id="color" value="#008080">
</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 #008080;<br>
border-radius: 12px;
</div>
<script>
const preview = document.getElementById("preview-box");
const widthInput = document.getElementById("width");
const styleInput = document.getElementById("style");
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 w = widthInput.value + "px";
let s = styleInput.value;
let c = colorInput.value;
let r = radiusInput.value + "px";
preview.style.border = `${w} ${s} ${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:
- Copy the code into a
.htmlfile - Open it in your browser
- Use the sliders, dropdown, and color picker to see instant results
- The generated CSS appears at the bottom so you can copy it directly
