CSS Borders

Learn how to style element borders with CSS

CSS Border Properties

CSS borders allow you to specify the style, width, and color of an element's border. You can control borders on all sides of an element or target specific sides individually.

Border Properties:

border-width: Sets the width of the border
border-style: Sets the style of the border (solid, dashed, etc.)
border-color: Sets the color of the border
border: Shorthand for all border properties
border-radius: Sets rounded corners

1. Basic Border Properties

/* Individual properties */
.element {
    border-width: 2px;
    border-style: solid;
    border-color: #333;
}

/* Shorthand */
.element {
    border: 2px solid #333;
}

/* Different sides */
.element {
    border-top: 1px solid red;
    border-right: 2px dashed blue;
    border-bottom: 3px dotted green;
    border-left: 4px double orange;
}

2. Border Styles

/* Available border styles */
.border-styles {
    border: 2px solid black;      /* solid line */
    border: 2px dashed black;     /* dashed line */
    border: 2px dotted black;     /* dotted line */
    border: 2px double black;     /* double line */
    border: 2px groove black;     /* 3D grooved border */
    border: 2px ridge black;      /* 3D ridged border */
    border: 2px inset black;      /* 3D inset border */
    border: 2px outset black;     /* 3D outset border */
    border: none;                 /* no border */
    border: hidden;               /* hidden border */
}

3. Border Width

/* Border width values */
.border-widths {
    /* Using keywords */
    border-width: thin;           /* typically 1px */
    border-width: medium;         /* typically 3px */
    border-width: thick;          /* typically 5px */
    
    /* Using specific measurements */
    border-width: 2px;
    border-width: 0.2em;
    border-width: 3rem;
    
    /* Different widths for each side */
    border-width: 1px 2px 3px 4px;  /* top right bottom left */
    
    /* Individual side widths */
    border-top-width: 2px;
    border-right-width: 3px;
    border-bottom-width: 4px;
    border-left-width: 5px;
}

4. Border Color

/* Border color options */
.border-colors {
    /* Named colors */
    border-color: red;
    
    /* Hexadecimal */
    border-color: #ff0000;
    
    /* RGB */
    border-color: rgb(255, 0, 0);
    
    /* RGBA (with transparency) */
    border-color: rgba(255, 0, 0, 0.5);
    
    /* Different colors for each side */
    border-color: red blue green yellow;
    
    /* Individual side colors */
    border-top-color: red;
    border-right-color: blue;
    border-bottom-color: green;
    border-left-color: yellow;
}

5. Border Radius

/* Border radius examples */
.border-radius {
    /* Equal radius on all corners */
    border-radius: 10px;
    
    /* Different radius for each corner */
    border-radius: 10px 20px 30px 40px;  /* top-left top-right bottom-right bottom-left */
    
    /* Individual corner radius */
    border-top-left-radius: 10px;
    border-top-right-radius: 20px;
    border-bottom-right-radius: 30px;
    border-bottom-left-radius: 40px;
    
    /* Elliptical corners */
    border-radius: 50% 20%;
    
    /* Create a circle */
    border-radius: 50%;
}

6. Border Images

/* Border image properties */
.border-image {
    /* Basic border image */
    border-image-source: url('border-image.png');
    border-image-slice: 30;
    border-image-width: 10px;
    border-image-outset: 10px;
    border-image-repeat: round;
    
    /* Shorthand */
    border-image: url('border-image.png') 30 round;
    
    /* Gradient border */
    border-image: linear-gradient(45deg, red, blue) 1;
}

7. Multiple Borders

/* Creating multiple borders */
.multiple-borders {
    /* Using box-shadow */
    box-shadow:
        0 0 0 2px red,
        0 0 0 4px blue,
        0 0 0 6px green;
    
    /* Using outline */
    border: 2px solid red;
    outline: 2px solid blue;
    outline-offset: 2px;
}

Practical Examples

1. Button Styles

/* Basic button */
.button {
    padding: 10px 20px;
    border: 2px solid #007bff;
    border-radius: 5px;
    transition: all 0.3s ease;
}

.button:hover {
    border-color: #0056b3;
    background-color: #0056b3;
    color: white;
}

/* Outline button */
.button-outline {
    padding: 10px 20px;
    border: 2px solid #007bff;
    border-radius: 5px;
    background: transparent;
    color: #007bff;
    transition: all 0.3s ease;
}

.button-outline:hover {
    background: #007bff;
    color: white;
}

2. Card Design

.card {
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
}

.card:hover {
    border-color: #007bff;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

/* Gradient border card */
.gradient-card {
    border: 3px solid;
    border-image: linear-gradient(45deg, #ff6b6b, #4ecdc4) 1;
    border-radius: 8px;
}

3. Input Styling

.input {
    border: 2px solid #e0e0e0;
    border-radius: 4px;
    padding: 8px 12px;
    transition: border-color 0.3s ease;
}

.input:focus {
    border-color: #007bff;
    outline: none;
    box-shadow: 0 0 0 3px rgba(0,123,255,0.25);
}

.input.error {
    border-color: #dc3545;
}

.input.success {
    border-color: #28a745;
}

4. Image Border Effects

/* Polaroid effect */
.polaroid {
    border: 10px solid white;
    border-bottom: 45px solid white;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

/* Frame effect */
.frame {
    border: 15px solid #8b4513;
    border-radius: 2px;
    box-shadow: 
        inset 0 0 10px rgba(0,0,0,0.5),
        0 4px 8px rgba(0,0,0,0.3);
}

/* Double border with spacing */
.double-border {
    border: 5px solid #333;
    outline: 3px solid #333;
    outline-offset: 5px;
}

Best Practices

Border Best Practices:

Use consistent border styles throughout your website
Consider border-radius for better visual appeal
Use transitions for hover effects
Be mindful of border width on small screens
Use border colors that complement your color scheme
Consider high contrast borders for accessibility

Browser Support

Support Notes:

Basic border properties are supported in all modern browsers
border-radius is widely supported but may need prefixes for older browsers
border-image has good support but may need fallbacks
Gradient borders may need fallbacks in older browsers