border-width

# border-width

border-width 属性可以设置盒子模型的边框宽度。

# uni-app x 兼容性

Web	Android	iOS
4.0	3.9	4.11

# 浏览器兼容性

Chrome	Edge	Firefox	Opera	Safari	IE
√（ 1 ）	√（ 12 ）	√（ 1 ）	√（ 3.5 ）	√（ 1 ）	√（ 4 ）

# 语法

border-width: <line-width>{1,4};

# border-width 的属性值

名称

兼容性

描述

thin

细边线

medium

中等边线

thick

宽边线

# 默认值

medium

注意

App平台，HBuilderX3.92及以前版本默认值为0px；HBuilderX3.93+版本调整默认值为thin；HBuilderX4.0+版本调整默认值为medium，与W3C规范保持一致。
Android平台Chrome浏览器或内置Webview中，实际默认值不是medium，是根据设备自动计算的介于thin和medium中间的值。这与W3C规范不符，在uni-app x编译到web时，对其进行了css重置，调整默认值为medium。

# 示例

hello uni-app x

Template

<template>
  <!-- #ifdef APP -->
  <scroll-view style="flex: 1">
  <!-- #endif -->
    <view style="flex-grow: 1">
      <view>
        <text>border-width: 5px (without border-style)</text>
        <view class="common" style="border-width: 5px;"></view>
      </view>

      <view>
        <text>border-width: 5px</text>
        <view class="common" style="border-width: 5px; border-style: solid;"></view>
      </view>

      <view>
        <text>border-left-width: 5px</text>
        <view class="common" style="border-left-width: 5px; border-left-style: solid; "></view>
      </view>

      <view>
        <text>border-top-width: 10px</text>
        <view class="common" style="border-top-width: 10px; border-top-style: solid; "></view>
      </view>

      <view>
        <text>border-right-width: 15px</text>
        <view class="common" style="border-right-width: 15px; border-right-style: solid; "></view>
      </view>

      <view>
        <text>border-bottom-width: 20px</text>
        <view class="common" style="border-bottom-width: 20px; border-bottom-style: solid; "></view>
      </view>
    </view>
  <!-- #ifdef APP -->
  </scroll-view>
  <!-- #endif -->
</template>

<style>
  .common {
    width: 250px;
    height: 250px;
    background-color: gray;
  }
</style>