diff --git a/src/components/context_menu/__snapshots__/context_menu.test.tsx.snap b/src/components/context_menu/__snapshots__/context_menu.test.tsx.snap
index 7c64ed7950f..dae00b32e78 100644
--- a/src/components/context_menu/__snapshots__/context_menu.test.tsx.snap
+++ b/src/components/context_menu/__snapshots__/context_menu.test.tsx.snap
@@ -19,7 +19,7 @@ exports[`EuiContextMenu can pass-through horizontal rule props 1`] = `
     </div>
     <div>
       <hr
-        class="euiHorizontalRule euiHorizontalRule--half euiHorizontalRule--marginSmall"
+        class="euiHorizontalRule euiHorizontalRule--half euiHorizontalRule--marginSmall css-14bhqlx-euiHorizontalRule-half-s"
       />
     </div>
   </div>
@@ -67,7 +67,7 @@ exports[`EuiContextMenu panel item can be a separator line 1`] = `
         </span>
       </button>
       <hr
-        class="euiHorizontalRule euiHorizontalRule--full"
+        class="euiHorizontalRule euiHorizontalRule--full css-pnauuy-euiHorizontalRule-full"
       />
       <button
         class="euiContextMenuItem"
diff --git a/src/components/horizontal_rule/__snapshots__/horizontal_rule.test.tsx.snap b/src/components/horizontal_rule/__snapshots__/horizontal_rule.test.tsx.snap
index 66b4d0cd9f1..1aa6f3a4c8d 100644
--- a/src/components/horizontal_rule/__snapshots__/horizontal_rule.test.tsx.snap
+++ b/src/components/horizontal_rule/__snapshots__/horizontal_rule.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`EuiHorizontalRule is rendered 1`] = `
 <hr
   aria-label="aria-label"
-  class="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginLarge testClass1 testClass2"
+  class="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginLarge testClass1 testClass2 css-14ofhbg-euiHorizontalRule-full-l"
   data-test-subj="test subject string"
 />
 `;
diff --git a/src/components/horizontal_rule/_horizontal_rule.scss b/src/components/horizontal_rule/_horizontal_rule.scss
deleted file mode 100644
index b90b06bf18b..00000000000
--- a/src/components/horizontal_rule/_horizontal_rule.scss
+++ /dev/null
@@ -1,38 +0,0 @@
-.euiHorizontalRule {
-  border: none;
-  height: 1px;
-  background-color: $euiBorderColor;
-  flex-shrink: 0; // Ensure when used in flex group, it retains its size
-  flex-grow: 0; // Ensure when used in flex group, it retains its size
-
-  &.euiHorizontalRule--full {
-    width: 100%;
-  }
-
-  &.euiHorizontalRule--half {
-    width: 50%;
-    margin-left: auto;
-    margin-right: auto;
-  }
-
-  &.euiHorizontalRule--quarter {
-    width: 25%;
-    margin-left: auto;
-    margin-right: auto;
-  }
-}
-
-$ruleMargins: (
-  marginXSmall: $euiSizeS,
-  marginSmall: $euiSizeM,
-  marginMedium: $euiSize,
-  marginLarge: $euiSizeL,
-  marginXLarge: $euiSizeXL,
-  marginXXLarge: $euiSizeXXL,
-);
-
-@each $name, $size in $ruleMargins {
-  .euiHorizontalRule--#{$name} {
-    margin: $size 0;
-  }
-}
diff --git a/src/components/horizontal_rule/_index.scss b/src/components/horizontal_rule/_index.scss
deleted file mode 100644
index 33b688e72d9..00000000000
--- a/src/components/horizontal_rule/_index.scss
+++ /dev/null
@@ -1 +0,0 @@
-@import 'horizontal_rule';
diff --git a/src/components/horizontal_rule/horizontal_rule.styles.ts b/src/components/horizontal_rule/horizontal_rule.styles.ts
new file mode 100644
index 00000000000..7dc11ce8c39
--- /dev/null
+++ b/src/components/horizontal_rule/horizontal_rule.styles.ts
@@ -0,0 +1,54 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { css } from '@emotion/react';
+import { UseEuiTheme } from '../../services';
+
+export const euiHorizontalRuleStyles = ({ euiTheme }: UseEuiTheme) => ({
+  euiHorizontalRule: css`
+    border: none;
+    height: ${euiTheme.border.width.thin};
+    background-color: ${euiTheme.border.color};
+    flex-shrink: 0; // Ensure when used in flex group, it retains its size
+    flex-grow: 0; // Ensure when used in flex group, it retains its size
+  `,
+
+  // Sizes
+  full: css`
+    width: 100%;
+  `,
+  half: css`
+    width: 50%;
+    margin-inline: auto;
+  `,
+  quarter: css`
+    width: 25%;
+    margin-inline: auto;
+  `,
+
+  // Margins
+  none: '',
+  xs: css`
+    margin-block: ${euiTheme.size.s};
+  `,
+  s: css`
+    margin-block: ${euiTheme.size.m};
+  `,
+  m: css`
+    margin-block: ${euiTheme.size.base};
+  `,
+  l: css`
+    margin-block: ${euiTheme.size.l};
+  `,
+  xl: css`
+    margin-block: ${euiTheme.size.xl};
+  `,
+  xxl: css`
+    margin-block: ${euiTheme.size.xxl};
+  `,
+});
diff --git a/src/components/horizontal_rule/horizontal_rule.test.tsx b/src/components/horizontal_rule/horizontal_rule.test.tsx
index 1dbd2484a0c..e9dd2ad8272 100644
--- a/src/components/horizontal_rule/horizontal_rule.test.tsx
+++ b/src/components/horizontal_rule/horizontal_rule.test.tsx
@@ -9,10 +9,12 @@
 import React from 'react';
 import { render } from 'enzyme';
 import { requiredProps } from '../../test/required_props';
-
+import { shouldRenderCustomStyles } from '../../test/internal';
 import { EuiHorizontalRule } from './horizontal_rule';
 
 describe('EuiHorizontalRule', () => {
+  shouldRenderCustomStyles(<EuiHorizontalRule {...requiredProps} />);
+
   test('is rendered', () => {
     const component = render(<EuiHorizontalRule {...requiredProps} />);
 
diff --git a/src/components/horizontal_rule/horizontal_rule.tsx b/src/components/horizontal_rule/horizontal_rule.tsx
index b6f34f48ce8..64d84d8e1e1 100644
--- a/src/components/horizontal_rule/horizontal_rule.tsx
+++ b/src/components/horizontal_rule/horizontal_rule.tsx
@@ -10,6 +10,8 @@ import React, { FunctionComponent, HTMLAttributes } from 'react';
 import classNames from 'classnames';
 
 import { CommonProps } from '../common';
+import { useEuiTheme } from '../../services';
+import { euiHorizontalRuleStyles } from './horizontal_rule.styles';
 
 export type EuiHorizontalRuleSize = keyof typeof sizeToClassNameMap;
 export type EuiHorizontalRuleMargin = keyof typeof marginToClassNameMap;
@@ -50,6 +52,9 @@ export const EuiHorizontalRule: FunctionComponent<EuiHorizontalRuleProps> = ({
   margin = 'l',
   ...rest
 }) => {
+  const euiTheme = useEuiTheme();
+  const styles = euiHorizontalRuleStyles(euiTheme);
+
   const classes = classNames(
     'euiHorizontalRule',
     sizeToClassNameMap[size],
@@ -57,5 +62,7 @@ export const EuiHorizontalRule: FunctionComponent<EuiHorizontalRuleProps> = ({
     className
   );
 
-  return <hr className={classes} {...rest} />;
+  const cssStyles = [styles.euiHorizontalRule, styles[size], styles[margin]];
+
+  return <hr css={cssStyles} className={classes} {...rest} />;
 };
diff --git a/src/components/index.scss b/src/components/index.scss
index 86d7d5bae0c..fc523b84463 100644
--- a/src/components/index.scss
+++ b/src/components/index.scss
@@ -31,7 +31,6 @@
 @import 'form/index';
 @import 'header/index';
 @import 'health/index';
-@import 'horizontal_rule/index';
 @import 'icon/index';
 @import 'image/index';
 @import 'key_pad_menu/index';
diff --git a/upcoming_changelogs/5815.md b/upcoming_changelogs/5815.md
new file mode 100644
index 00000000000..b648d03fa8f
--- /dev/null
+++ b/upcoming_changelogs/5815.md
@@ -0,0 +1,4 @@
+**CSS-in-JS conversions**
+
+- Converted `EuiHorizontalRule` to emotion; Removed `$ruleMargins`
+