CSS Rounded Borders

CSS Rounded Borders का उपयोग border के कोनों को गोल करने के लिए किया जाता है। इसके लिए border-radius property का प्रयोग किया जाता है। Rounded borders modern UI design का एक महत्वपूर्ण हिस्सा हैं और buttons, cards, images तथा containers को smooth appearance देते हैं।

border-radius Property

border-radius property से border के corners को round किया जाता है।

Basic syntax:

selector {
  border-radius: value;
}

border-radius के Values

border-radius में length या percentage values दी जा सकती हैं।

Length Values

Length values जैसे px, em, rem सबसे अधिक उपयोग की जाती हैं।

div {
  border: 2px solid black;
  border-radius: 10px;
}

Value जितनी अधिक होगी, corner उतना ज्यादा round होगा।

Percentage Value

Percentage value element के size पर depend करती है।

div {
  border: 2px solid black;
  border-radius: 50%;
}

Square element पर 50% देने से circle बनता है।

Four Corners के लिए अलग-अलग Radius

border-radius में चार values देकर हर corner का अलग radius सेट किया जा सकता है।

Order होता है:
top-left, top-right, bottom-right, bottom-left

div {
  border: 2px solid black;
  border-radius: 10px 20px 30px 40px;
}

Two और Three Values का Usage

Two values:

div {
  border: 2px solid black;
  border-radius: 10px 30px;
}

यहाँ:

• top-left और bottom-right: 10px
• top-right और bottom-left: 30px

Three values:

div {
  border: 2px solid black;
  border-radius: 10px 20px 30px;
}

यहाँ:

• top-left: 10px
• top-right और bottom-left: 20px
• bottom-right: 30px

Individual Corner Radius

हर corner के लिए अलग property भी होती है।

Properties:

• border-top-left-radius
• border-top-right-radius
• border-bottom-right-radius
• border-bottom-left-radius

Example:

div {
  border: 2px solid black;
  border-top-left-radius: 20px;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 15px;
  border-bottom-left-radius: 0;
}

Elliptical Border Radius

CSS में elliptical corners भी बनाए जा सकते हैं, जहाँ horizontal और vertical radius अलग-अलग होती है।

div {
  border: 2px solid black;
  border-radius: 50px / 20px;
}

इससे oval shape का corner effect बनता है।

border के बिना border-radius

border-radius बिना border के भी काम करता है और background को round करता है।

div {
  background-color: lightblue;
  border-radius: 15px;
}

Rounded Borders का Practical Use

• Buttons और cards को modern look देने के लिए
• Profile images को circle बनाने के लिए
• Alerts और notification boxes को smooth बनाने के लिए
• Forms और input fields को user-friendly दिखाने के लिए

Example button:

button {
  border: 1px solid #333;
  border-radius: 6px;
}

CSS Rounded Borders UI design को visually appealing और professional बनाने का एक essential feature है।