CSS Border Types - Interactive Learning- Std VIII
🎨 CSS Border Types - Interactive Learning
Complete HTML + CSS Code
<!DOCTYPE html>
<html>
<head>
<style>
.box {
padding: 25px;
margin: 25px;
font-size: 50px;
color: blue;
}
/* Border Type: DOTTED */
.dotted {
border: 4px dotted red;
}
/* Border Type: DASHED */
.dashed {
border: 4px dashed green;
}
/* Border Type: SOLID */
.solid {
border: 4px solid blue;
}
/* Border Type: DOUBLE */
.double {
border: 4px double purple;
}
/* Border Type: GROOVE */
.groove {
border: 6px groove orange;
}
/* Border Type: RIDGE */
.ridge {
border: 6px ridge brown;
}
/* Border Type: INSET */
.inset {
border: 6px inset teal;
}
/* Border Type: OUTSET */
.outset {
border: 6px outset pink;
}
</style>
</head>
<body>
<h1>Border Style Types</h1>
<div class="box dotted">Dotted</div>
<div class="box dashed">Dashed</div>
<div class="box solid">Solid</div>
<div class="box double">Double</div>
<div class="box groove">Groove</div>
<div class="box ridge">Ridge</div>
<div class="box inset">Inset</div>
<div class="box outset">Outset</div>
</body>
</html>
<html>
<head>
<style>
.box {
padding: 25px;
margin: 25px;
font-size: 50px;
color: blue;
}
/* Border Type: DOTTED */
.dotted {
border: 4px dotted red;
}
/* Border Type: DASHED */
.dashed {
border: 4px dashed green;
}
/* Border Type: SOLID */
.solid {
border: 4px solid blue;
}
/* Border Type: DOUBLE */
.double {
border: 4px double purple;
}
/* Border Type: GROOVE */
.groove {
border: 6px groove orange;
}
/* Border Type: RIDGE */
.ridge {
border: 6px ridge brown;
}
/* Border Type: INSET */
.inset {
border: 6px inset teal;
}
/* Border Type: OUTSET */
.outset {
border: 6px outset pink;
}
</style>
</head>
<body>
<h1>Border Style Types</h1>
<div class="box dotted">Dotted</div>
<div class="box dashed">Dashed</div>
<div class="box solid">Solid</div>
<div class="box double">Double</div>
<div class="box groove">Groove</div>
<div class="box ridge">Ridge</div>
<div class="box inset">Inset</div>
<div class="box outset">Outset</div>
</body>
</html>
Live Output - All Border Types
✓ Dotted
✓ Dashed
✓ Solid
✓ Double
✓ Groove
✓ Ridge
✓ Inset
✓ Outset
✓ All border types displayed with their CSS styling
What is a Border?
A border is a line that goes around the edges of an HTML element. It's used to outline and highlight elements on a webpage.
Border: A visible edge/outline around HTML elements like divs, paragraphs, images, tables, etc.
The 8 Border Types:
- dotted - Made of dots
- dashed - Made of dashes
- solid - Solid line
- double - Two parallel lines
- groove - 3D carved/sunken
- ridge - 3D raised/embossed
- inset - 3D pressed in
- outset - 3D button raised
How to Use Border?
Basic Syntax:
border: [width] [style] [color];
Complete Example:
border: 4px dotted red;
- 4px = Border width (thickness)
- dotted = Border style type
- red = Border color
Individual Properties:
border-width: 4px;
border-style: dotted;
border-color: red;
Where to Use Borders?
Real-World Uses:
- Dotted/Dashed: Separating sections, casual look
- Solid: Professional boxes, containers, forms
- Double: Elegant frames, important content
- Groove/Ridge: 3D card effects, depth
- Inset: Form inputs, pressed buttons
- Outset: Raised buttons, clickable elements
HTML Elements to Style:
- <div> - Container boxes
- <p> - Paragraphs with emphasis
- <img> - Image frames
- <button> - Button styling
- <input> - Form inputs
- <table> - Table borders
Comments
Post a Comment