CSS Border Properties | Rustcode

CSS Border Properties

Introduction to CSS Borders

CSS borders define the boundaries of HTML elements, adding structure and visual separation to web layouts. A border consists of three main properties: border-width, border-style, and border-color. These can be set individually or combined using the border shorthand property.

Border vs. Outline vs. Box Shadow:

Border: Occupies space within the element's box model, affecting layout.
Outline: Drawn outside the border, does not occupy space or affect layout, often used for accessibility (e.g., focus indicators).
Box Shadow: Creates a shadow effect around the element, does not occupy space or affect layout.

Core Border Properties

Border Width

Controls the thickness of an element's border, set uniformly or individually for each side (top, right, bottom, left).

.demo-border-width {
    border-width: 5px;
    border-style: solid;
    border-color: #333333;
    padding: 15px;
    text-align: center;
    font-weight: bold;
    color: #ffffff;
    background: #666666;
}

Border Width: 5px

Values for border-width:

Pixels (px): e.g., 1px, 5px.
Keywords: thin, medium, thick.
1 to 4 values: top right bottom left.

Border Style

Defines the visual appearance of the border. A style is required for the border to be visible.

.demo-border-style {
    border-width: 3px;
    border-style: dashed;
    border-color: #666666;
    padding: 15px;
    text-align: center;
    font-weight: bold;
    color: #ffffff;
    background: #333333;
}

Border Style: Dashed

Common border-style Values:

none: No border (default).
solid: Single, straight line.
dotted: Series of dots.
dashed: Series of short dashes.
double: Two parallel solid lines.
groove: Carved-in effect.
ridge: 3D embossed effect.
inset: 3D inset effect.
outset: 3D outset effect.

Border Color

Sets the border's color using color names, HEX, RGB, RGBA, HSL, or HSLA values.

.demo-border-color {
    border-width: 3px;
    border-style: solid;
    border-color: #A0C4FF;
    padding: 15px;
    text-align: center;
    font-weight: bold;
    color: #1a1a1a;
    background: #666666;
}

Border Color: #A0C4FF

Border Shorthand

Combines border-width, border-style, and border-color into a single declaration for efficiency.

.demo-border-shorthand {
    border: 3px solid #333333;
    padding: 15px;
    text-align: center;
    font-weight: bold;
    color: #ffffff;
    background: #666666;
}

Border Shorthand: 3px solid

Order Convention: Use width style color in border shorthand for readability.

Related Properties

Outline

Draws a line outside the element's border, not affecting layout or occupying space.

.demo-outline {
    border: 1px solid #333333;
    outline: 3px dashed #666666;
    outline-offset: 5px;
    padding: 15px;
    text-align: center;
    font-weight: bold;
    color: #ffffff;
    background: #333333;
}

Outline Demo

outline-offset: Adds space between the border and outline.

Box Shadow

Adds drop shadows to an element's box, with customizable offset, blur, spread, and color.

.demo-box-shadow {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    padding: 15px;
    text-align: center;
    font-weight: bold;
    color: #1a1a1a;
    background: var(--rc-background-color);
}

Box Shadow Demo

box-shadow Values:

horizontal-offset: Right (positive), left (negative).
vertical-offset: Down (positive), up (negative).
blur-radius: Larger values create more blur.
spread-radius: Expands (positive) or shrinks (negative).
color: Shadow color.
inset: Creates an inner shadow.

Border Image

Uses an image or gradient as the element's border, requiring a base border property.

.demo-border-image {
    border: 10px solid transparent;
    border-image: linear-gradient(45deg, #ff6a00, #ffcc00) 1;
    padding: 15px;
    text-align: center;
    font-weight: bold;
    color: #ffa300;
    background: #666666;
}

Border Image Demo

Note: border-image requires a border property (e.g., border: 10px solid transparent) to function.