From c147a5d7d6e881e68503fb367bafcd8b51e62def Mon Sep 17 00:00:00 2001 From: Tommaso Allegretti <61681908+TommasoAllegretti@users.noreply.github.com> Date: Wed, 9 Apr 2025 20:29:54 +0200 Subject: [PATCH] Docs: add "Border radius" section for Forms > Input group (#40776) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Mark Otto Co-authored-by: Julien Déramond --- site/content/docs/5.3/forms/input-group.md | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/site/content/docs/5.3/forms/input-group.md b/site/content/docs/5.3/forms/input-group.md index d984a485bc..6de39e58b4 100644 --- a/site/content/docs/5.3/forms/input-group.md +++ b/site/content/docs/5.3/forms/input-group.md @@ -59,6 +59,18 @@ Input groups wrap by default via `flex-wrap: wrap` in order to accommodate custo {{< /example >}} +## Border radius + +Due to limitations of browser support at the time, `border-radius` styles can only be applied to the first and last children within the `.input-group` class. Any non-visible element in one of those positions will cause the input group to render incorrectly. This will unfortunately not be fixed until v6 most likely. + +{{< example >}} +
+ @ + + +
+{{< /example >}} + ## Sizing Add the relative form sizing classes to the `.input-group` itself and contents within will automatically resize—no need for repeating the form control size classes on each element.