Porsche Design System

Border

Table of Contents

Border Radius
Border Width

The Porsche Design System Tailwind theme customizes the Tailwind variables --radius-* and --border-*, which affect multiple Tailwind classes including .rounded-*, .border-* and others.

Border Radius#

.rounded-sm

.rounded-md

.rounded-lg

Open in Stackblitz

<!doctype html>
<html lang="en" class="auto">
<head>
  <title></title>
</head>
<body class="bg-base">

<div class="grid gap-fluid-md prose-text-sm">
  <div class="rounded-sm border p-fluid-sm">
    .rounded-sm
  </div>
  <div class="rounded-md border p-fluid-sm">
    .rounded-md
  </div>
  <div class="rounded-lg border p-fluid-sm">
    .rounded-lg
  </div>
</div>
<script>

</script>
</body>
</html>

Border Width#

.border

.border-thin

.border-regular

Open in Stackblitz

<!doctype html>
<html lang="en" class="auto">
<head>
  <title></title>
</head>
<body class="bg-base">

<div class="grid gap-fluid-md prose-text-sm">
  <div class="border p-fluid-sm">
    .border
  </div>
  <div class="border-thin p-fluid-sm">
    .border-thin
  </div>
  <div class="border-regular p-fluid-sm">
    .border-regular
  </div>
</div>
<script>

</script>
</body>
</html>