Border ба border-radius

.box {
  border-width: 2px; /* зузаан */
  border-style: solid; /* хэлбэр */
  border-color: #1e293b; /* өнгө */
}

.solid {
  border-style: solid;
} /* тасралтгүй шугам */
.dashed {
  border-style: dashed;
} /* зуурмаг шугам */
.dotted {
  border-style: dotted;
} /* цэгэн шугам */
.double {
  border-style: double;
} /* давхар шугам */
.none {
  border-style: none;
} /* хүрээгүй */

/* border: width style color */
.card {
  border: 1px solid #1e293b;
}

.btn-outline {
  border: 2px solid #a78bfa;
}

.input {
  border: 1px dashed #475569;
}

.highlight {
  border-top: 3px solid #a78bfa; /* зөвхөн дээд хүрээ */
  border-right: none;
  border-bottom: 1px solid #1e293b;
  border-left: 4px solid #60a5fa; /* зөвхөн зүүн хүрээ */
}

.alert {
  border: 1px solid #1e293b;
  border-left: 4px solid #a78bfa; /* нил ягаан зүүн зурвас */
  padding: 16px 20px;
  border-radius: 8px;
  background-color: #0f172a;
}

/* Дөрвөн булан ижил */
.card {
  border-radius: 8px;
}

/* Тал тус бүрийг тохируулах */
.custom {
  border-top-left-radius: 16px;
  border-top-right-radius: 4px;
  border-bottom-right-radius: 16px;
  border-bottom-left-radius: 4px;
}

/* Shorthand: top-left  top-right  bottom-right  bottom-left */
.custom {
  border-radius: 16px 4px 16px 4px;
}

/* Тойрог болгох */
.avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%; /* бүхэлдээ тойрог */
  overflow: hidden;
}

/* Pill хэлбэр */
.badge {
  border-radius: 9999px; /* маш том утга = pill */
  padding: 4px 12px;
}

.fancy {
  /* Өнгийг тусад нь тохируулж болно */
  border-color: #1e293b #a78bfa #1e293b #60a5fa;
  /* дээд  баруун  доод  зүүн */
}

/* Gradient border — background-clip ашиглан */
.gradient-border {
  border: 2px solid transparent;
  background-clip: padding-box;
  background-color: #0f172a;
  position: relative;
}

.btn {
  border: 2px solid #a78bfa; /* box model-д нөлөөлнө, зай эзэлнэ */
  outline: none; /* анхдагч outline-г арилгах */
}

/* Accessibility: focus үед outline хэзээ ч бүрэн арилгаж болохгүй */
.btn:focus-visible {
  outline: 2px solid #a78bfa; /* box model-д нөлөөлөхгүй */
  outline-offset: 2px; /* элементээс зай авах */
}

/* Карт */
.card {
  background-color: #0f172a;
  border: 1px solid #1e293b;
  border-radius: 12px;
  padding: 24px;
}

.card:hover {
  border-color: #a78bfa; /* hover дээр нил ягаан болох */
}

/* Товч */
.btn-outline {
  border: 1px solid #a78bfa;
  border-radius: 6px;
  background-color: transparent;
  color: #a78bfa;
  padding: 10px 20px;
  cursor: pointer;
}

.btn-outline:hover {
  background-color: rgba(167, 139, 250, 0.1);
}

/* Оролтын талбар */
.input {
  border: 1px solid #1e293b;
  border-radius: 6px;
  background-color: #0f172a;
  color: #f1f5f9;
  padding: 10px 14px;
  width: 100%;
}

.input:focus {
  outline: none;
  border-color: #a78bfa;
}