Angular Material项目下如何增大mat-form-field outline的边框半径

现有方案出现左侧渲染异常的核心原因：Angular Material 的 outline 轮廓并非完整的单元素描边，而是拆分为左段、浮动标签缺口段、右段三个独立的分段拼接而成，多数旧方案只修改了外层容器的圆角，没有同步调整三个内部分段的圆角参数，最终导致描边拼接位置错位、线条变形。

实现步骤 #

• 直接在组件样式中通过 ::ng-deep 编写穿透样式，无需修改组件视图封装配置
• 同步联动修改轮廓外层容器、三个分段描边、内部输入区的参数，避免样式错位
• 如需局部生效，可给需要自定义圆角的表单项加专属类名，避免样式污染全局其他表单域

可直接复用的样式代码 #

::ng-deep .mat-form-field-appearance-outline {
  // 替换为你需要的圆角大小即可，比如16px、24px
  $custom-radius: 16px;

  // 外层轮廓容器设置圆角，避免内容溢出
  .mat-form-field-outline {
    border-radius: $custom-radius;

    // 左侧描边段设置对应圆角，解决错位问题
    .mat-form-field-outline-start {
      border-start-start-radius: $custom-radius;
      border-end-start-radius: $custom-radius;
    }

    // 右侧描边段设置对应圆角
    .mat-form-field-outline-end {
      border-start-end-radius: $custom-radius;
      border-end-end-radius: $custom-radius;
    }

    // 标签缺口段保持直角，避免和标签位置错位
    .mat-form-field-outline-gap {
      border-start-start-radius: 0;
      border-start-end-radius: 0;
    }
  }

  // 适配大圆角下的输入区内边距，避免文字贴边
  .mat-form-field-infix {
    padding: 1em 0.8em;
  }
}

常见踩坑提醒 #

• 不要只单独给 .mat-form-field-outline 外层设置圆角，该容器本身没有实际的描边样式，所有可见的边框都是内部三个分段元素渲染的，不修改分段参数就一定会出现拼接错位的问题。
• 不需要全局修改视图封装等级，只要把上述样式的选择器前置到你的专属类下，比如 ::ng-deep .rounded-form-field.mat-form-field-appearance-outline，就能精准控制需要改圆角的表单，不会影响项目其他位置的默认样式。
• 圆角数值无上下限限制，不管是小到8px还是大到32px，只要三个分段的圆角值和外层容器保持一致，就不会出现线条变形、错位的渲染异常。

内容的提问来源于stack exchange，提问作者ineedtoknow