diff --git a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-server/hadoop-yarn-server-resourcemanager/src/main/java/org/apache/hadoop/yarn/server/resourcemanager/webapp/CapacitySchedulerPage.java b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-server/hadoop-yarn-server-resourcemanager/src/main/java/org/apache/hadoop/yarn/server/resourcemanager/webapp/CapacitySchedulerPage.java
index 821e6f1471376e..07da9de7be8c0b 100644
--- a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-server/hadoop-yarn-server-resourcemanager/src/main/java/org/apache/hadoop/yarn/server/resourcemanager/webapp/CapacitySchedulerPage.java
+++ b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-server/hadoop-yarn-server-resourcemanager/src/main/java/org/apache/hadoop/yarn/server/resourcemanager/webapp/CapacitySchedulerPage.java
@@ -345,7 +345,7 @@ public void render(Block html) {
               $title(join("Absolute Capacity:", percent(absCap))).
               span().$style(join(Q_GIVEN, ";font-size:1px;", width(capPercent))).
             __('.').__().
-              span().$style(join(width(usedCapPercent),
+              span().$style(join(barWidth(usedCapPercent),
                 ";font-size:1px;left:0%;", absUsedCap > absCap ? Q_OVER : Q_UNDER)).
             __('.').__().
               span(".q", info.getQueuePath()).__().
@@ -490,7 +490,7 @@ public void render(Block html) {
           //label is not enabled in the cluster or there's only "default" label,
           ul.li().
             a(_Q).$style(width(Q_MAX_WIDTH)).
-              span().$style(join(width(used), ";left:0%;",
+              span().$style(join(barWidth(used), ";left:0%;",
                   used > 1 ? Q_OVER : Q_UNDER)).__(".").__().
               span(".q", "root").__().
             span().$class("qstats").$style(left(Q_STATS_POS)).
@@ -510,7 +510,7 @@ public void render(Block html) {
                 "Partition: " + nodeLabelDisplay + " " + label.getResource();
             ul.li().
             a(_Q).$style(width(Q_MAX_WIDTH)).
-              span().$style(join(width(used), ";left:0%;",
+              span().$style(join(barWidth(used), ";left:0%;",
                   used > 1 ? Q_OVER : Q_UNDER)).__(".").__().
               span(".q", partitionUiTag).__().
             span().$class("qstats").$style(left(Q_STATS_POS)).
@@ -520,7 +520,7 @@ public void render(Block html) {
             UL<Hamlet> underLabel = html.ul("#pq");
             underLabel.li().
             a(_Q).$style(width(Q_MAX_WIDTH)).
-              span().$style(join(width(used), ";left:0%;",
+              span().$style(join(barWidth(used), ";left:0%;",
                   used > 1 ? Q_OVER : Q_UNDER)).__(".").__().
               span(".q", "root").__().
             span().$class("qstats").$style(left(Q_STATS_POS)).
@@ -688,6 +688,10 @@ static String width(float f) {
     return StringUtils.format("width:%.1f%%", f * 100);
   }
 
+  static String barWidth(float f) {
+    return width(Math.max(0f, Math.min(f, 1f)));
+  }
+
   static String left(float f) {
     return StringUtils.format("left:%.1f%%", f * 100);
   }
diff --git a/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-server/hadoop-yarn-server-resourcemanager/src/test/java/org/apache/hadoop/yarn/server/resourcemanager/webapp/TestCapacitySchedulerPage.java b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-server/hadoop-yarn-server-resourcemanager/src/test/java/org/apache/hadoop/yarn/server/resourcemanager/webapp/TestCapacitySchedulerPage.java
new file mode 100644
index 00000000000000..0294919ab051b4
--- /dev/null
+++ b/hadoop-yarn-project/hadoop-yarn/hadoop-yarn-server/hadoop-yarn-server-resourcemanager/src/test/java/org/apache/hadoop/yarn/server/resourcemanager/webapp/TestCapacitySchedulerPage.java
@@ -0,0 +1,33 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+package org.apache.hadoop.yarn.server.resourcemanager.webapp;
+
+import static org.junit.jupiter.api.Assertions.assertEquals;
+
+import org.junit.jupiter.api.Test;
+
+public class TestCapacitySchedulerPage {
+
+  @Test
+  public void testBarWidth() {
+    assertEquals("width:0.0%", CapacitySchedulerPage.barWidth(-0.1f));
+    assertEquals("width:45.0%", CapacitySchedulerPage.barWidth(0.45f));
+    assertEquals("width:100.0%", CapacitySchedulerPage.barWidth(4.875f));
+  }
+}