Button Border Styling Guide

1. Basic Border Variations

.thin-border {
  border: 1px solid #3498db;
}

.standard-border {
  border: 2px solid #3498db;
}

.thick-border {
  border: 4px solid #3498db;
}

2. Border Radius

.rounded-sm {
  border: 2px solid #e74c3c;
  border-radius: 4px;
}

.rounded-md {
  border: 2px solid #e74c3c;
  border-radius: 8px;
}

.rounded-lg {
  border: 2px solid #e74c3c;
  border-radius: 16px;
}

.rounded-full {
  border: 2px solid #e74c3c;
  border-radius: 50px; /* Large enough for pill shape */
}

3. Border Styles

.solid-border {
  border: 2px solid #2ecc71;
}

.dashed-border {
  border: 2px dashed #2ecc71;
}

.dotted-border {
  border: 2px dotted #2ecc71;
}

.double-border {
  border: 5px double #2ecc71;
}

4. Shadow Effects

.shadow-sm {
  border: 2px solid #9b59b6;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.shadow-md {
  border: 2px solid #9b59b6;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.shadow-lg {
  border: 2px solid #9b59b6;
  box-shadow: 0 8px 16px rgba(0,0,0,0.1);
}

.inset-shadow {
  border: 2px solid #9b59b6;
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.1);
}

5. Hover Effects

.hover-effect {
  border: 2px solid #f39c12;
  transition: all 0.3s ease;
}

.hover-effect:hover {
  border-color: #d35400;
  background-color: #f39c12;
  color: white;
  transform: translateY(-2px);
}

.hover-glow {
  border: 2px solid #f39c12;
  transition: all 0.3s ease;
}

.hover-glow:hover {
  box-shadow: 0 0 8px 3px rgba(243, 156, 18, 0.6);
}

6. Modern Button Styles

/* Ghost Button */
.ghost-button {
  background-color: transparent;
  color: #16a085;
  border: 2px solid #16a085;
  transition: all 0.3s ease;
}

.ghost-button:hover {
  background-color: #16a085;
  color: white;
}

/* Gradient Border */
.gradient-border {
  border: 3px solid transparent;
  background-image: linear-gradient(white, white), 
                    linear-gradient(to right, #3498db, #9b59b6);
  background-origin: border-box;
  background-clip: padding-box, border-box;
}

/* Expanding Border Effect */
.border-fade {
  position: relative;
  z-index: 1;
  border: none;
}

.border-fade::before {
  content: '';
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  z-index: -1;
  border: 2px solid #1abc9c;
  border-radius: 4px;
  transition: all 0.3s ease;
}

.border-fade:hover::before {
  top: -3px; right: -3px; bottom: -3px; left: -3px;
  opacity: 0.5;
}

7. Special Border Techniques

/* Multiple Border Effect */
.multi-border {
  border: 2px solid #3498db;
  box-shadow: 0 0 0 4px #f8f9fa, 0 0 0 6px #3498db;
}

Key Considerations for Clean Button Borders

• Consistency: Keep border styles consistent throughout your site
• Contrast: Ensure enough contrast between the border color and background
• State changes: Design different border styles for hover, focus, and active states
• Accessibility: Always include a visible focus state for keyboard navigation
• Responsiveness: Consider how your borders will look on smaller screens

Accessibility Tips

For accessible button borders:

/* Focus states are important for accessibility */
.button:focus {
  outline: 2px solid #16a085;
  outline-offset: 2px;
}

/* High contrast mode support */
@media (forced-colors: active) {
  .button {
    border: 2px solid ButtonText;
  }
}