← Back to CSS Course | Chapter 3: Box Model | Lesson 6 of 7

CSS Rounded Corners

border-radius किसी element के sharp corners को round कर देता है, और किसी square element पर radius को काफ़ी ऊपर set करके आप उसे एक perfect circle में बदल सकते हैं।

In this page:

  1. border-radius Shorthand
  2. Circles और Pills बनाना
  3. Elliptical Corners
  4. Per-Corner Longhand Properties
  5. Rounded Corners और overflow
Syntax
css 
selector {
  border-radius: length;
  border-radius: top-left top-right bottom-right bottom-left;
}

border-radius Shorthand

border-radius चारों corners को बराबर round करने के लिए एक value लेता है, या top-left/top-right/bottom-right/bottom-left को individually set करने के लिए चार values तक, top-left से शुरू होकर clockwise order में।

Note:
  • Accepted values:
  • length — radius जैसे 8px
  • percentage — box size के relative, 50% square से circle बनाता है
  • 1 से 4 values — corners क्रम में top-left, top-right, bottom-right, bottom-left
  • slash syntax — elliptical corners के लिए 50px / 20px
  • 0 — square corners (default)
  • inherit | initial | unset | revert — हर property द्वारा accepted CSS-wide keywords

उदाहरण: The border-radius Shorthand

css 
<style>
.all {
  border-radius: 12px;
  background: steelblue;
  color: white;
  padding: 12px;
  display: inline-block;
}
.four {
  border-radius: 4px 8px 12px 16px;
  background: seagreen;
  color: white;
  padding: 12px;
  display: inline-block;
}
</style>
<div class="all">All corners equal</div>
<div class="four">Four different corners</div>

Circles और Pills बनाना

किसी square element (बराबर width और height) पर border-radius को 50% set करना एक perfect circle बनाता है, क्योंकि हर corner का radius exactly element के size का आधा हो जाता है।

किसी rectangular button पर, border-radius: 999px (या height के आधे से बड़ी कोई value) हर सिरे पर visually एक पूरा semicircle पर cap करके common pill shape बनाता है।

Note:
  • Accepted values:
  • 50% — square element पर एक perfect circle
  • 9999px — एक बड़ा radius pill बनाता है
  • length — जैसे 12px
  • percentage — width और height के relative
  • inherit | initial | unset | revert — हर property द्वारा accepted CSS-wide keywords

उदाहरण: Making Circles and Pills

css 
<style>
.circle {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: steelblue;
}
.pill {
  padding: 10px 20px;
  border-radius: 999px;
  background: seagreen;
  color: white;
  display: inline-block;
}
</style>
<div class="circle"></div>
<div class="pill">Pill button</div>

Elliptical Corners

border-radius हर corner के लिए एक slash से अलग की गई दो values accept करता है — horizontal-radius / vertical-radius — जो perfectly circular के बजाय एक elliptical corner curve बनाता है, stylized card या blob shapes के लिए उपयोगी।

Note:
  • Accepted values:
  • <horizontal> / <vertical> — slash syntax, जैसे 50px / 20px
  • एक longhand में दो values — जैसे border-top-left-radius: 40px 20px
  • percentages — box के साथ scale होती हैं
  • length — जैसे 10px
  • inherit | initial | unset | revert — हर property द्वारा accepted CSS-wide keywords

उदाहरण: Elliptical Corners

css 
<style>
.box {
  width: 150px;
  height: 80px;
  border-radius: 50% / 20%;
  background: steelblue;
}
</style>
<div class="box">Elliptical corners</div>

Per-Corner Longhand Properties

border-top-left-radius, border-top-right-radius, border-bottom-right-radius, और border-bottom-left-radius आपको सिर्फ एक या दो specific corners को round करने देते हैं, tab-shaped elements या speech-bubble-style callouts के लिए common।

Note:
  • Accepted values:
  • border-top-left-radius — top-left corner
  • border-top-right-radius — top-right corner
  • border-bottom-right-radius — bottom-right corner
  • border-bottom-left-radius — bottom-left corner
  • हर एक एक length या percentage लेता है; दो values इसे elliptical बना देती हैं
  • inherit | initial | unset | revert — हर property द्वारा accepted CSS-wide keywords

उदाहरण: Per-Corner Longhand Properties

css 
<style>
.tab {
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  background: steelblue;
  color: white;
  padding: 10px;
  display: inline-block;
}
</style>
<div class="tab">Only the top corners are rounded</div>

Rounded Corners और overflow

border-radius अकेले किसी element के content या background image को round shape तक clip नहीं करता — round किए गए box से बड़ा कोई child image या background फिर भी square corners बाहर निकालता रहेगा जब तक rounded element पर overflow: hidden भी set न हो।

उदाहरण: Rounded Corners and overflow

css 
<style>
.card {
  border-radius: 12px;
  overflow: hidden;
}
</style>
<div class="card">
  <img src="https://placehold.co/200x150" alt="Clipped to the card's rounded corners">
</div>
Live Example
Related Topics

CSS Box Model · CSS Border Images · CSS Height/Width · CSS Padding

{# common_mistakes/chapter_summary/browser_support: on Hindi pages the view already swaps in the hi_ translation fields (or blanks these out if untranslated), so this renders correctly for both languages without a lang_code check here. #}
आम गलतियां
  1. किसी non-square element पर border-radius: 50% इस्तेमाल करना और circle के बजाय एक ellipse मिलना।
  2. यह उम्मीद करना कि rounded corners child content को clip कर देंगे, जबकि आपको overflow: hidden भी चाहिए।
  3. यह उम्मीद करना कि border-radius: 9999px जैसी बड़ी value टूट जाएगी, जबकि यह capped है और pill shapes बनाने का एक common तरीका है।
ब्राउज़र सपोर्ट

हर modern browser में supported: Chrome, Firefox, Safari, Edge और Opera।

🔒

Chapter Quiz — Complete all 7 topics to unlock

0/7 topics done

Complete these topics first:

← Previous Lesson CSS Box Model Next Lesson → CSS Border Images

Login to run this code

C/C++/Java/PHP execution requires a free account. Your code is saved — you'll land right back in the editor after logging in.