diff --git a/packages/grafana-data/src/themes/createShape.ts b/packages/grafana-data/src/themes/createShape.ts
index 686e91b9993..4afb884b2ed 100644
--- a/packages/grafana-data/src/themes/createShape.ts
+++ b/packages/grafana-data/src/themes/createShape.ts
@@ -1,6 +1,13 @@
 /** @beta */
 export interface ThemeShape {
   borderRadius: (amount?: number) => string;
+  radius: Radii;
+}
+
+interface Radii {
+  default: string;
+  pill: string;
+  circle: string;
 }
 
 /** @internal */
@@ -11,12 +18,23 @@ export interface ThemeShapeInput {
 export function createShape(options: ThemeShapeInput): ThemeShape {
   const baseBorderRadius = options.borderRadius ?? 2;
 
+  const radius = {
+    default: '2px',
+    pill: '9999px',
+    circle: '100%',
+  };
+
+  /**
+   * @deprecated Use `theme.shape.radius.default`, `theme.shape.radius.pill` or `theme.shape.radius.circle`instead
+   * @param amount
+   */
   const borderRadius = (amount?: number) => {
     const value = (amount ?? 1) * baseBorderRadius;
     return `${value}px`;
   };
 
   return {
+    radius,
     borderRadius,
   };
 }
diff --git a/packages/grafana-ui/src/components/Badge/Badge.tsx b/packages/grafana-ui/src/components/Badge/Badge.tsx
index a5f07e76835..d754a14b37e 100644
--- a/packages/grafana-ui/src/components/Badge/Badge.tsx
+++ b/packages/grafana-ui/src/components/Badge/Badge.tsx
@@ -62,7 +62,7 @@ const getStyles = (theme: GrafanaTheme2, color: BadgeColor) => {
       font-size: ${theme.typography.size.sm};
       display: inline-flex;
       padding: 1px 4px;
-      border-radius: 3px;
+      border-radius: ${theme.shape.radius.default};
       background: ${bgColor};
       border: 1px solid ${borderColor};
       color: ${textColor};
diff --git a/packages/grafana-ui/src/components/BarGauge/BarGauge.tsx b/packages/grafana-ui/src/components/BarGauge/BarGauge.tsx
index 47ab798514d..4db55bf07cc 100644
--- a/packages/grafana-ui/src/components/BarGauge/BarGauge.tsx
+++ b/packages/grafana-ui/src/components/BarGauge/BarGauge.tsx
@@ -132,8 +132,18 @@ export class BarGauge extends PureComponent<Props> {
   }
 
   renderRetroBars(): ReactNode {
-    const { display, field, value, itemSpacing, alignmentFactors, orientation, lcdCellWidth, text, valueDisplayMode } =
-      this.props;
+    const {
+      display,
+      field,
+      value,
+      itemSpacing,
+      alignmentFactors,
+      orientation,
+      lcdCellWidth,
+      text,
+      valueDisplayMode,
+      theme,
+    } = this.props;
     const { valueHeight, valueWidth, maxBarHeight, maxBarWidth, wrapperWidth, wrapperHeight } =
       calculateBarAndValueDimensions(this.props);
     const minValue = field.min ?? GAUGE_DEFAULT_MINIMUM;
@@ -171,7 +181,7 @@ export class BarGauge extends PureComponent<Props> {
       const currentValue = minValue + (valueRange / cellCount) * i;
       const cellColor = getCellColor(currentValue, value, display);
       const cellStyles: CSSProperties = {
-        borderRadius: '2px',
+        borderRadius: theme.shape.radius.default,
       };
 
       if (cellColor.isLit) {
@@ -478,7 +488,7 @@ export function getBasicAndGradientStyles(props: Props): BasicAndGradientStyles
   };
 
   const barStyles: CSSProperties = {
-    borderRadius: '3px',
+    borderRadius: theme.shape.radius.default,
     position: 'relative',
     zIndex: 1,
   };
@@ -487,7 +497,7 @@ export function getBasicAndGradientStyles(props: Props): BasicAndGradientStyles
     background: theme.colors.background.secondary,
     flexGrow: 1,
     display: 'flex',
-    borderRadius: '3px',
+    borderRadius: theme.shape.radius.default,
     position: 'relative',
   };
 
diff --git a/packages/grafana-ui/src/components/BigValue/BigValueLayout.tsx b/packages/grafana-ui/src/components/BigValue/BigValueLayout.tsx
index 7f0e7dc8d46..9925d2ae49f 100644
--- a/packages/grafana-ui/src/components/BigValue/BigValueLayout.tsx
+++ b/packages/grafana-ui/src/components/BigValue/BigValueLayout.tsx
@@ -123,7 +123,7 @@ export abstract class BigValueLayout {
       width: `${width}px`,
       height: `${height}px`,
       padding: `${this.panelPadding}px`,
-      borderRadius: '3px',
+      borderRadius: theme.shape.borderRadius(),
       position: 'relative',
       display: 'flex',
     };
diff --git a/packages/grafana-ui/src/components/CallToActionCard/CallToActionCard.tsx b/packages/grafana-ui/src/components/CallToActionCard/CallToActionCard.tsx
index 45bb1f8f01c..ada7fa8d161 100644
--- a/packages/grafana-ui/src/components/CallToActionCard/CallToActionCard.tsx
+++ b/packages/grafana-ui/src/components/CallToActionCard/CallToActionCard.tsx
@@ -29,7 +29,7 @@ const getStyles = (theme: GrafanaTheme2) => ({
     label: call-to-action-card;
     padding: ${theme.spacing(3)};
     background: ${theme.colors.background.secondary};
-    border-radius: ${theme.shape.borderRadius(2)};
+    border-radius: ${theme.shape.radius.default};
     display: flex;
     flex-direction: column;
     align-items: center;
diff --git a/packages/grafana-ui/src/components/Collapse/Collapse.tsx b/packages/grafana-ui/src/components/Collapse/Collapse.tsx
index aa2d172f327..3b56bae307f 100644
--- a/packages/grafana-ui/src/components/Collapse/Collapse.tsx
+++ b/packages/grafana-ui/src/components/Collapse/Collapse.tsx
@@ -14,7 +14,7 @@ const getStyles = (theme: GrafanaTheme2) => ({
     background-color: ${theme.colors.background.primary};
     border: 1px solid ${theme.colors.border.medium};
     position: relative;
-    border-radius: 3px;
+    border-radius: ${theme.shape.radius.default};
     width: 100%;
     display: flex;
     flex-direction: column;
diff --git a/packages/grafana-ui/src/components/DateTimePickers/RelativeTimeRangePicker/RelativeTimeRangePicker.tsx b/packages/grafana-ui/src/components/DateTimePickers/RelativeTimeRangePicker/RelativeTimeRangePicker.tsx
index cc888aa713a..93b203eb352 100644
--- a/packages/grafana-ui/src/components/DateTimePickers/RelativeTimeRangePicker/RelativeTimeRangePicker.tsx
+++ b/packages/grafana-ui/src/components/DateTimePickers/RelativeTimeRangePicker/RelativeTimeRangePicker.tsx
@@ -268,7 +268,7 @@ const getStyles = (fromError?: string, toError?: string) => (theme: GrafanaTheme
       z-index: ${theme.zIndex.modal};
       width: 500px;
       top: 100%;
-      border-radius: 2px;
+      border-radius: ${theme.shape.radius.default};
       border: 1px solid ${theme.colors.border.weak};
       left: 0;
       white-space: normal;
diff --git a/packages/grafana-ui/src/components/EmptySearchResult/EmptySearchResult.tsx b/packages/grafana-ui/src/components/EmptySearchResult/EmptySearchResult.tsx
index 436bc87eeee..b6d7729e0ed 100644
--- a/packages/grafana-ui/src/components/EmptySearchResult/EmptySearchResult.tsx
+++ b/packages/grafana-ui/src/components/EmptySearchResult/EmptySearchResult.tsx
@@ -21,7 +21,7 @@ const getStyles = (theme: GrafanaTheme2) => {
       background-color: ${theme.colors.background.secondary};
       padding: ${theme.spacing(2)};
       min-width: 350px;
-      border-radius: ${theme.shape.borderRadius(2)};
+      border-radius: ${theme.shape.radius.default};
       margin-bottom: ${theme.spacing(4)};
     `,
   };
diff --git a/packages/grafana-ui/src/components/FileDropzone/FileListItem.tsx b/packages/grafana-ui/src/components/FileDropzone/FileListItem.tsx
index fba1fb6e4c9..bd942ded6ff 100644
--- a/packages/grafana-ui/src/components/FileDropzone/FileListItem.tsx
+++ b/packages/grafana-ui/src/components/FileDropzone/FileListItem.tsx
@@ -124,15 +124,15 @@ function getStyles(theme: GrafanaTheme2) {
       color: ${theme.colors.error.text};
     `,
     progressBar: css`
-      border-radius: ${theme.spacing(1)};
+      border-radius: ${theme.shape.radius.default};
       height: 4px;
       ::-webkit-progress-bar {
         background-color: ${theme.colors.border.weak};
-        border-radius: ${theme.spacing(1)};
+        border-radius: ${theme.shape.radius.default};
       }
       ::-webkit-progress-value {
         background-color: ${theme.colors.primary.main};
-        border-radius: ${theme.spacing(1)};
+        border-radius: ${theme.shape.radius.default};
       }
     `,
   };
diff --git a/packages/grafana-ui/src/components/Forms/InlineLabel.tsx b/packages/grafana-ui/src/components/Forms/InlineLabel.tsx
index b01146f17b6..0be4eee341a 100644
--- a/packages/grafana-ui/src/components/Forms/InlineLabel.tsx
+++ b/packages/grafana-ui/src/components/Forms/InlineLabel.tsx
@@ -64,7 +64,7 @@ export const getInlineLabelStyles = (theme: GrafanaTheme2, transparent = false,
       height: ${theme.spacing(theme.components.height.md)};
       line-height: ${theme.spacing(theme.components.height.md)};
       margin-right: ${theme.spacing(0.5)};
-      border-radius: ${theme.shape.borderRadius(2)};
+      border-radius: ${theme.shape.radius.default};
       border: none;
       width: ${width ? (width !== 'auto' ? `${8 * width}px` : width) : '100%'};
       color: ${theme.colors.text.primary};
diff --git a/packages/grafana-ui/src/components/Logs/LogRowContext.tsx b/packages/grafana-ui/src/components/Logs/LogRowContext.tsx
index d432f048823..ad94500bbee 100644
--- a/packages/grafana-ui/src/components/Logs/LogRowContext.tsx
+++ b/packages/grafana-ui/src/components/Logs/LogRowContext.tsx
@@ -56,7 +56,7 @@ const getLogRowContextStyles = (theme: GrafanaTheme2, wrapLogMessage?: boolean)
       background: ${theme.colors.background.primary};
       box-shadow: 0 0 10px ${theme.v1.palette.black};
       border: 1px solid ${theme.colors.background.secondary};
-      border-radius: ${theme.shape.borderRadius(2)};
+      border-radius: ${theme.shape.borderRadius()};
       width: 100%;
     `,
     header: css`
diff --git a/packages/grafana-ui/src/components/Logs/getLogRowStyles.ts b/packages/grafana-ui/src/components/Logs/getLogRowStyles.ts
index b2153313ef8..34ac2253f80 100644
--- a/packages/grafana-ui/src/components/Logs/getLogRowStyles.ts
+++ b/packages/grafana-ui/src/components/Logs/getLogRowStyles.ts
@@ -141,7 +141,7 @@ export const getLogRowStyles = (theme: GrafanaTheme2, logLevel?: LogLevel) => {
       label: logs-row-details-table;
       border: 1px solid ${theme.colors.border.medium};
       padding: 0 ${theme.spacing(1)} ${theme.spacing(1)};
-      border-radius: 3px;
+      border-radius: ${theme.shape.radius.default};
       margin: 20px 8px 20px 16px;
       cursor: default;
     `,
diff --git a/packages/grafana-ui/src/components/PageLayout/PageToolbar.tsx b/packages/grafana-ui/src/components/PageLayout/PageToolbar.tsx
index 0f4510c7008..49508b3e2e5 100644
--- a/packages/grafana-ui/src/components/PageLayout/PageToolbar.tsx
+++ b/packages/grafana-ui/src/components/PageLayout/PageToolbar.tsx
@@ -213,7 +213,7 @@ const getStyles = (theme: GrafanaTheme2) => {
       font-size: ${typography.size.lg};
       margin: 0;
       max-width: 300px;
-      border-radius: 2px;
+      border-radius: ${theme.shape.radius.default};
     `,
     titleLink: css`
       &:focus-visible {
diff --git a/packages/grafana-ui/src/components/PanelChrome/HoverWidget.tsx b/packages/grafana-ui/src/components/PanelChrome/HoverWidget.tsx
index c67a11837a2..188f6c8158d 100644
--- a/packages/grafana-ui/src/components/PanelChrome/HoverWidget.tsx
+++ b/packages/grafana-ui/src/components/PanelChrome/HoverWidget.tsx
@@ -82,7 +82,7 @@ function getStyles(theme: GrafanaTheme2) {
       background: theme.colors.background.secondary,
       color: theme.colors.text.primary,
       border: `1px solid ${theme.colors.border.weak}`,
-      borderRadius: '1px',
+      borderRadius: theme.shape.radius.default,
       height: theme.spacing(4),
       boxShadow: theme.shadows.z1,
     }),
diff --git a/packages/grafana-ui/src/components/PanelChrome/PanelStatus.tsx b/packages/grafana-ui/src/components/PanelChrome/PanelStatus.tsx
index 7e83298fd3a..4f0c9cb887a 100644
--- a/packages/grafana-ui/src/components/PanelChrome/PanelStatus.tsx
+++ b/packages/grafana-ui/src/components/PanelChrome/PanelStatus.tsx
@@ -40,7 +40,7 @@ const getStyles = (theme: GrafanaTheme2) => {
       padding: theme.spacing(padding),
       width: theme.spacing(headerHeight),
       height: theme.spacing(headerHeight),
-      borderRadius: 0,
+      borderRadius: theme.shape.radius.default,
     }),
   };
 };
diff --git a/packages/grafana-ui/src/components/PanelContainer/PanelContainer.tsx b/packages/grafana-ui/src/components/PanelContainer/PanelContainer.tsx
index d39725ec91a..7add88dc4cc 100644
--- a/packages/grafana-ui/src/components/PanelContainer/PanelContainer.tsx
+++ b/packages/grafana-ui/src/components/PanelContainer/PanelContainer.tsx
@@ -20,5 +20,5 @@ const getStyles = (theme: GrafanaTheme2) =>
   css`
     background-color: ${theme.components.panel.background};
     border: 1px solid ${theme.components.panel.borderColor};
-    border-radius: 3px;
+    border-radius: ${theme.shape.radius.default};
   `;
diff --git a/packages/grafana-ui/src/components/Table/FilterPopup.tsx b/packages/grafana-ui/src/components/Table/FilterPopup.tsx
index 304be70f812..6bec1404938 100644
--- a/packages/grafana-ui/src/components/Table/FilterPopup.tsx
+++ b/packages/grafana-ui/src/components/Table/FilterPopup.tsx
@@ -104,7 +104,7 @@ const getStyles = (theme: GrafanaTheme2) => ({
     padding: ${theme.spacing(2)};
     margin: ${theme.spacing(1)} 0;
     box-shadow: 0px 0px 20px ${theme.v1.palette.black};
-    border-radius: ${theme.spacing(0.5)};
+    border-radius: ${theme.shape.radius.default};
   `,
   listDivider: css`
     label: listDivider;
diff --git a/packages/grafana-ui/src/components/Table/styles.ts b/packages/grafana-ui/src/components/Table/styles.ts
index 55826a9ade1..92008b9a9e4 100644
--- a/packages/grafana-ui/src/components/Table/styles.ts
+++ b/packages/grafana-ui/src/components/Table/styles.ts
@@ -260,7 +260,7 @@ export function useTableStyles(theme: GrafanaTheme2, cellHeightOption: TableCell
       height: 100%;
       position: absolute;
       right: -4px;
-      border-radius: 3px;
+      border-radius: ${theme.shape.radius.default};
       top: 0;
       touch-action: none;
 
diff --git a/packages/grafana-ui/src/components/Tabs/Tab.tsx b/packages/grafana-ui/src/components/Tabs/Tab.tsx
index 952850275eb..e094d06af88 100644
--- a/packages/grafana-ui/src/components/Tabs/Tab.tsx
+++ b/packages/grafana-ui/src/components/Tabs/Tab.tsx
@@ -95,7 +95,7 @@ const getTabStyles = stylesFactory((theme: GrafanaTheme2) => {
           left: 0;
           right: 0;
           height: 4px;
-          border-radius: 2px;
+          border-radius: ${theme.shape.radius.default};
           bottom: 0px;
           background: ${theme.colors.action.hover};
         }
@@ -118,7 +118,7 @@ const getTabStyles = stylesFactory((theme: GrafanaTheme2) => {
         left: 0;
         right: 0;
         height: 4px;
-        border-radius: 2px;
+        border-radius: ${theme.shape.radius.default};
         bottom: 0px;
         background-image: ${theme.colors.gradients.brandHorizontal} !important;
       }
diff --git a/packages/grafana-ui/src/components/Tabs/VerticalTab.tsx b/packages/grafana-ui/src/components/Tabs/VerticalTab.tsx
index 4351430ebaf..cdc45a96af8 100644
--- a/packages/grafana-ui/src/components/Tabs/VerticalTab.tsx
+++ b/packages/grafana-ui/src/components/Tabs/VerticalTab.tsx
@@ -77,7 +77,7 @@ const getTabStyles = (theme: GrafanaTheme2) => {
         width: 4px;
         bottom: 2px;
         top: 2px;
-        border-radius: 2px;
+        border-radius: ${theme.shape.radius.default};
         background-image: linear-gradient(0deg, #f05a28 30%, #fbca0a 99%);
       }
     `,
diff --git a/packages/grafana-ui/src/components/Tags/Tag.tsx b/packages/grafana-ui/src/components/Tags/Tag.tsx
index d4be0de6ad9..067560c0371 100644
--- a/packages/grafana-ui/src/components/Tags/Tag.tsx
+++ b/packages/grafana-ui/src/components/Tags/Tag.tsx
@@ -70,7 +70,7 @@ const getTagStyles = (theme: GrafanaTheme2, name: string, colorIndex?: number) =
       white-space: nowrap;
       text-shadow: none;
       padding: 3px 6px;
-      border-radius: ${theme.shape.borderRadius(2)};
+      border-radius: ${theme.shape.radius.default};
     `,
     hover: css`
       &:hover {
diff --git a/packages/grafana-ui/src/components/TagsInput/TagItem.tsx b/packages/grafana-ui/src/components/TagsInput/TagItem.tsx
index 3df2d17e1ac..ed06644eecf 100644
--- a/packages/grafana-ui/src/components/TagsInput/TagItem.tsx
+++ b/packages/grafana-ui/src/components/TagsInput/TagItem.tsx
@@ -50,7 +50,7 @@ const getStyles = (theme: GrafanaTheme2) => {
       color: '#fff',
       borderWidth: '1px',
       borderStyle: 'solid',
-      borderRadius: '3px',
+      borderRadius: theme.shape.radius.default,
       padding: `0 ${theme.spacing(0.5)}`,
       whiteSpace: 'nowrap',
       textShadow: 'none',
diff --git a/packages/grafana-ui/src/components/VizLegend/SeriesIcon.tsx b/packages/grafana-ui/src/components/VizLegend/SeriesIcon.tsx
index dd0d6b9525b..e65e8885687 100644
--- a/packages/grafana-ui/src/components/VizLegend/SeriesIcon.tsx
+++ b/packages/grafana-ui/src/components/VizLegend/SeriesIcon.tsx
@@ -30,7 +30,7 @@ export const SeriesIcon = React.memo(
       background: cssColor,
       width: '14px',
       height: '4px',
-      borderRadius: '1px',
+      borderRadius: theme.shape.radius.default,
       display: 'inline-block',
       marginRight: '8px',
     };
diff --git a/packages/grafana-ui/src/utils/tooltipUtils.ts b/packages/grafana-ui/src/utils/tooltipUtils.ts
index 15a9f125858..543f1c4b127 100644
--- a/packages/grafana-ui/src/utils/tooltipUtils.ts
+++ b/packages/grafana-ui/src/utils/tooltipUtils.ts
@@ -37,7 +37,7 @@ export function buildTooltipTheme(
     `,
     container: css`
       background-color: ${tooltipBg};
-      border-radius: 3px;
+      border-radius: ${theme.shape.radius.default};
       border: 1px solid ${toggletipBorder};
       box-shadow: ${theme.shadows.z2};
       color: ${tooltipText};
diff --git a/public/app/features/logs/components/LogRowContext.tsx b/public/app/features/logs/components/LogRowContext.tsx
index bc68b82b614..1e8a98bb7eb 100644
--- a/public/app/features/logs/components/LogRowContext.tsx
+++ b/public/app/features/logs/components/LogRowContext.tsx
@@ -89,7 +89,7 @@ const getLogRowContextStyles = (theme: GrafanaTheme2, wrapLogMessage?: boolean,
       background: ${theme.colors.background.primary};
       box-shadow: 0 0 ${theme.spacing(1.25)} ${theme.v1.palette.black};
       border: 1px solid ${theme.colors.background.secondary};
-      border-radius: ${theme.shape.borderRadius()};
+      border-radius: ${theme.shape.radius.default};
       font-family: ${theme.typography.fontFamily};
     `,
     header: css`
@@ -107,7 +107,7 @@ const getLogRowContextStyles = (theme: GrafanaTheme2, wrapLogMessage?: boolean,
       background: ${theme.colors.background.canvas};
     `,
     top: css`
-      border-radius: 0 0 ${theme.shape.borderRadius()} ${theme.shape.borderRadius()};
+      border-radius: 0 0 ${theme.shape.radius.default} ${theme.shape.radius.default};
       box-shadow: 0 0 ${theme.spacing(1.25)} ${theme.v1.palette.black};
       clip-path: inset(0px -${theme.spacing(1.25)} -${theme.spacing(1.25)} -${theme.spacing(1.25)});
     `,
@@ -119,7 +119,7 @@ const getLogRowContextStyles = (theme: GrafanaTheme2, wrapLogMessage?: boolean,
       height: ${headerHeight}px;
       background: ${theme.colors.background.secondary};
       border: 1px solid ${theme.colors.background.secondary};
-      border-radius: ${theme.shape.borderRadius()} ${theme.shape.borderRadius()} 0 0;
+      border-radius: ${theme.shape.radius.default} ${theme.shape.radius.default} 0 0;
       box-shadow: 0 0 ${theme.spacing(1.25)} ${theme.v1.palette.black};
       clip-path: inset(-${theme.spacing(1.25)} -${theme.spacing(1.25)} 0px -${theme.spacing(1.25)});
       font-family: ${theme.typography.fontFamily};