Borders & Shadows

/* Shorthand: width style color */
.box { border: 2px solid #6c63ff; }

/* Border styles */
.a { border: 2px solid black; }    /* solid line */
.b { border: 2px dashed gray; }   /* dashed line */
.c { border: 2px dotted gray; }   /* dotted line */
.d { border: 4px double black; }  /* double line */
.e { border: none; }              /* no border */

/* Individual sides */
.card {
  border-top: 4px solid #6c63ff;  /* accent top border */
  border-bottom: 1px solid #eee;
}

/* Longhand */
.box {
  border-width: 2px;
  border-style: solid;
  border-color: #333;
}

.card   { border-radius: 12px; }     /* all corners */
.pill   { border-radius: 50px; }     /* pill shape */
.circle { border-radius: 50%; }      /* perfect circle */

/* Individual corners: top-left  top-right  bottom-right  bottom-left */
.badge { border-radius: 0 8px 8px 0; }  /* flat left, round right */

/* offset-x  offset-y  blur  spread  color */
.card { box-shadow: 0 4px 12px rgba(0,0,0,0.15); }

/* Multiple shadows */
.btn { box-shadow: 0 2px 4px rgba(0,0,0,0.1), 0 8px 16px rgba(108,99,255,0.2); }

/* Inset shadow (inner glow) */
input:focus { box-shadow: inset 0 0 0 2px #6c63ff; }

/* Remove shadow */
.flat { box-shadow: none; }

/* Hover lift effect */
.card { box-shadow: 0 2px 8px rgba(0,0,0,0.1); transition: box-shadow 0.2s; }
.card:hover { box-shadow: 0 8px 32px rgba(0,0,0,0.2); }

/* offset-x  offset-y  blur  color */
h1 { text-shadow: 2px 2px 4px rgba(0,0,0,0.3); }
.glow { text-shadow: 0 0 10px #6c63ff; }

/* outline doesn't affect layout — sits outside the box */
input:focus { outline: 2px solid #6c63ff; outline-offset: 2px; }
button      { outline: none; }  /* remove default, but add your own for accessibility */