diff --git a/docs/docs/native/details.md b/docs/docs/native/details.md
index cdb82d696..0b9febd88 100644
--- a/docs/docs/native/details.md
+++ b/docs/docs/native/details.md
@@ -18,7 +18,7 @@ Details show a brief summary and expand to show additional content.
 
 ## Examples
 
-### Right-to-Left languages
+### Right-to-Left Languages
 
 The details styling automatically adapts to right-to-left languages:
 
diff --git a/docs/docs/native/index.md b/docs/docs/native/index.md
index 077ba2a0b..522fa6d98 100644
--- a/docs/docs/native/index.md
+++ b/docs/docs/native/index.md
@@ -25,7 +25,7 @@ Here’s what we have so far:
   {%- endfor -%}
 </ul>
 
-## Opting out of Native Styles
+## Opting Out of Native Styles
 
 So you've decided to use Native Styles and now you need to style an element or a part of a page completely differently, what to do?
 You can create an opt-out with the power of [CSS Cascade Layers](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Cascade_layers)!
diff --git a/docs/docs/native/input.md b/docs/docs/native/input.md
index 93c6bbca7..a1d39d291 100644
--- a/docs/docs/native/input.md
+++ b/docs/docs/native/input.md
@@ -20,7 +20,7 @@ wa-code-demo::part(preview) {
 }
 </style>
 
-## Text fields
+## Text Fields
 
 ```html {.example}
 <label>Input (text) <input type="text" placeholder="placeholder"></label>
@@ -48,7 +48,7 @@ wa-code-demo::part(preview) {
 <wa-textarea label="WA Textarea"></wa-textarea>
 ```
 
-## Choice inputs
+## Choice Inputs
 
 ```html {.example}
 <label><input type="checkbox"> Input (checkbox)</label>
@@ -59,7 +59,7 @@ wa-code-demo::part(preview) {
 <wa-radio value="radio-1">WA Radio</wa-radio>
 ```
 
-## Color picker
+## Color Picker
 
 Basic:
 
@@ -87,7 +87,7 @@ With swatches:
  swatches="#0070ef; #f5a623; #f8e71c; #8b572a; #7ed321; #417505; #bd10e0; #9013fe;"></wa-color-picker>
 ```
 
-## Time and date Pickers
+## Time and Date Pickers
 
 ```html {.example}
 <label>Input (datetime-local) <input type="datetime-local"></label>
@@ -107,7 +107,7 @@ With swatches:
 <wa-range label="WA Range"></wa-range>
 ```
 
-## Select dropdowns
+## Select Dropdowns
 
 ```html {.example}
 <label>Select
diff --git a/docs/docs/native/table.md b/docs/docs/native/table.md
index 630adfb58..8e2a26a2b 100644
--- a/docs/docs/native/table.md
+++ b/docs/docs/native/table.md
@@ -46,7 +46,7 @@ elements:
 </table>
 ```
 
-## Alternating rows
+## Alternating Rows
 
 You can use the `wa-zebra-rows` class to add alternating row colors to your table:
 
diff --git a/docs/docs/utilities/appearance.md b/docs/docs/utilities/appearance.md
index 30ed917c0..d0cca6b47 100644
--- a/docs/docs/utilities/appearance.md
+++ b/docs/docs/utilities/appearance.md
@@ -1,5 +1,5 @@
 ---
-title: Appearance variants
+title: Appearance Variants
 ---
 
 You may have noticed that some Web Awesome components like `<wa-button>` allow you to change their overall style by using an `appearance` attribute:
@@ -47,7 +47,7 @@ This is all we need to do:
 </style>
 ```
 
-## With color variants
+## With Color Variants
 
 These properties also work well with the [color variants](/docs/utilities/color/) utility classes:
 
diff --git a/docs/docs/utilities/color.md b/docs/docs/utilities/color.md
index 991244fb9..7132c4528 100644
--- a/docs/docs/utilities/color.md
+++ b/docs/docs/utilities/color.md
@@ -1,5 +1,5 @@
 ---
-title: Color variants
+title: Color Variants
 ---
 
 You may have noticed that some Web Awesome components like `<wa-button>` allow you to change the color by using a `variant` attribute:
diff --git a/docs/docs/utilities/size.md b/docs/docs/utilities/size.md
index dc2300b76..2a5bb4b4f 100644
--- a/docs/docs/utilities/size.md
+++ b/docs/docs/utilities/size.md
@@ -47,7 +47,7 @@ For example, assume we wanted to make a custom `.tag` class with size variants.
 </style>
 ```
 
-## Advanced: Customizing the three sizes
+## Advanced: Customizing Sizes
 
 But what if you are creating a style that should **generally** be smaller (e.g. a badge) or larger (e.g. a pull quote)?
 For example, suppose we wanted to define a custom `.tag2` class just like `.tag` in the previous section,
diff --git a/docs/docs/utilities/visually-hidden.md b/docs/docs/utilities/visually-hidden.md
index f2f5533e9..41d38e939 100644
--- a/docs/docs/utilities/visually-hidden.md
+++ b/docs/docs/utilities/visually-hidden.md
@@ -46,7 +46,7 @@ Adding a label may seem redundant at times, but they're very helpful for unsight
 </wa-card>
 ```
 
-### Force visually hidden
+### Force Visually Hidden
 
 There are cases where you want to _always_ visually hide certain content, even when it's focused.
 For example when hiding a checkbox to render a custom one:
diff --git a/src/components/dropdown/dropdown.css b/src/components/dropdown/dropdown.css
index eef5d4788..02458086b 100644
--- a/src/components/dropdown/dropdown.css
+++ b/src/components/dropdown/dropdown.css
@@ -2,6 +2,7 @@
   --box-shadow: var(--wa-shadow-m);
 
   display: inline-block;
+  border-radius: var(--wa-form-control-border-radius);
 }
 
 .dropdown::part(popup) {
@@ -24,8 +25,14 @@
   transform-origin: left;
 }
 
-.trigger {
-  display: block;
+#trigger {
+  display: block; /* for boundingClientRect */
+
+  &,
+  &::slotted(*) {
+    /* Otherwise button groups don't work well with dropdown, see #348 */
+    border-radius: inherit !important;
+  }
 }
 
 .panel {
diff --git a/src/components/dropdown/dropdown.ts b/src/components/dropdown/dropdown.ts
index a41e4b536..9e50b9baa 100644
--- a/src/components/dropdown/dropdown.ts
+++ b/src/components/dropdown/dropdown.ts
@@ -46,7 +46,7 @@ export default class WaDropdown extends WebAwesomeElement {
   static shadowStyle = styles;
 
   @query('.dropdown') popup: WaPopup;
-  @query('.trigger') trigger: HTMLSlotElement;
+  @query('#trigger') trigger: HTMLSlotElement;
   @query('.panel') panel: HTMLSlotElement;
 
   private closeWatcher: CloseWatcher | null;
@@ -409,10 +409,20 @@ export default class WaDropdown extends WebAwesomeElement {
 
   render() {
     return html`
+      <slot
+        name="trigger"
+        id="trigger"
+        part="trigger"
+        @click=${this.handleTriggerClick}
+        @keydown=${this.handleTriggerKeyDown}
+        @keyup=${this.handleTriggerKeyUp}
+        @slotchange=${this.handleTriggerSlotChange}
+      ></slot>
       <wa-popup
         part="base"
         exportparts="popup:base__popup"
         id="dropdown"
+        anchor="trigger"
         placement=${this.placement}
         distance=${this.distance}
         skidding=${this.skidding}
@@ -427,17 +437,6 @@ export default class WaDropdown extends WebAwesomeElement {
           'dropdown--open': this.open,
         })}
       >
-        <slot
-          name="trigger"
-          slot="anchor"
-          part="trigger"
-          class="trigger"
-          @click=${this.handleTriggerClick}
-          @keydown=${this.handleTriggerKeyDown}
-          @keyup=${this.handleTriggerKeyUp}
-          @slotchange=${this.handleTriggerSlotChange}
-        ></slot>
-
         <div aria-hidden=${this.open ? 'false' : 'true'} aria-labelledby="dropdown">
           <slot part="panel" class="panel"></slot>
         </div>