The CSS box model is a foundational concept for web layout and design. It consists of margins, borders, padding, and the content area. The height and width properties control the size of the content area of an element. Let's explore these properties in detail.
The CSS box model consists of,
1. Content: The actual content of the box (text, images, etc.).
2. Padding: Space between the content and the border.
3. Border: A border surrounding the padding (if any) and content.
4. Margin: Space outside the border, separating the element from others.
border property
The border shorthand property is a convenient way to set the width, style, and color of all four borders (top, right, bottom, left) at once.
Syntax
border: [border-width] [border-style] [border-color];
Border Width
Specifies the width of the border. You can use keywords like thin, medium, thick, or you can specify a specific width using units like px, em, %, etc.,
Border Style
Specifies the style of the border. It can take values like:
1. none: No border (default).
2. solid: A solid line.
3. dashed: A series of dashes.
4. dotted: A series of dots.
5. double: Two solid lines.
6. groove: A carved-in effect (appears as if the border is carved into the page).
7. ridge: Opposite of groove; appears as if the border is coming out of the page.
8. inset: Makes the element look embedded.
9. outset: The opposite of inset
Border Color
Specifies the color of the border. You can use color names, hex values, RGB values, RGBA values (for transparency), or HSL values.
Example
/* All properties specified */ border: 2px solid red; /* Only style specified (default width is medium, default color is current color) */ border: dashed; /* Width and color specified (default style is none) */ border: 4px blue;
Individual Border Property Syntax
These properties allow you to specify the border for each side (left, right, top, bottom) individually. Each of these properties accepts values for width, style, and color.
Syntax
border-left: [border-width] [border-style] [border-color]; border-right: [border-width] [border-style] [border-color]; border-top: [border-width] [border-style] [border-color]; border-bottom: [border-width] [border-style] [border-color];
Example
/* Left border with specific width, style, and color */ border-left: 2px solid green; /* Right border with only style specified (default width is medium, default color is current color) */ border-right: dotted; /* Top border with width and color specified (default style is none) */ border-top: 5px blue; /* Bottom border with all three properties */ border-bottom: 3px double #ff6600;
You can also define the width, style, and color separately for each border side:
Border width
border-width: [top-width] [right-width] [bottom-width] [left-width]; border-left-width: [width]; border-right-width: [width]; border-top-width: [width]; border-bottom-width: [width];
Border style
border-style: [top-style] [right-style] [bottom-style] [left-style]; border-left-style: [style]; border-right-style: [style]; border-top-style: [style]; border-bottom-style: [style];
Border color
border-color: [top-color] [right-color] [bottom-color] [left-color]; border-left-color: [color]; border-right-color: [color]; border-top-color: [color]; border-bottom-color: [color];
customize-border.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>CSS Border Examples</title> <style> .border-example { padding: 20px; margin: 10px; width: 200px; } .solid-border { border: 2px solid #000; /* Solid black border */ } .dashed-border { border: 3px dashed #ff0000; /* Dashed red border */ } .dotted-border { border: 4px dotted #00ff00; /* Dotted green border */ } .double-border { border: 5px double #0000ff; /* Double blue border */ } .groove-border { border: 6px groove #a52a2a; /* Groove brown border */ } .ridge-border { border: 7px ridge #8a2be2; /* Ridge purple border */ } .inset-border { border: 8px inset #ff7f50; /* Inset coral border */ } .outset-border { border: 9px outset #d2691e; /* Outset chocolate border */ } .mixed-border { border-top: 2px solid #000; border-right: 4px dotted #ff0000; border-bottom: 6px double #00ff00; border-left: 8px groove #0000ff; /* Mixed styles */ } .transparent-border { border: 5px solid rgba(0, 0, 0, 0.5); /* Semi-transparent black border */ } .custom-color-border { border: 3px solid hsl(120, 100%, 50%); /* HSL green border */ } </style> </head> <body> <h1>CSS Border Property Examples</h1> <div class="border-example solid-border">Solid Border</div> <div class="border-example dashed-border">Dashed Border</div> <div class="border-example dotted-border">Dotted Border</div> <div class="border-example double-border">Double Border</div> <div class="border-example groove-border">Groove Border</div> <div class="border-example ridge-border">Ridge Border</div> <div class="border-example inset-border">Inset Border</div> <div class="border-example outset-border">Outset Border</div> <div class="border-example mixed-border">Mixed Border Styles</div> <div class="border-example transparent-border">Transparent Border</div> <div class="border-example custom-color-border">HSL Color Border</div> </body> </html>
Previous Next Home
No comments:
Post a Comment