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-xs

.rounded-sm

.rounded-md

.rounded-lg

.rounded-xl

.rounded-2xl

.rounded-3xl

.rounded-4xl

.rounded-full

Open in Stackblitz

<!doctype html>
<html lang="en" class="scheme-light-dark">
<head>
  <title></title>
</head>
<body class="bg-canvas">

<div class="grid gap-fluid-md prose-text-sm">
  <div class="rounded-xs border p-fluid-md">
    .rounded-xs
  </div>
  <div class="rounded-sm border p-fluid-md">
    .rounded-sm
  </div>
  <div class="rounded-md border p-fluid-md">
    .rounded-md
  </div>
  <div class="rounded-lg border p-fluid-md">
    .rounded-lg
  </div>
  <div class="rounded-xl border p-fluid-md">
    .rounded-xl
  </div>
  <div class="rounded-2xl border p-fluid-md">
    .rounded-2xl
  </div>
  <div class="rounded-3xl border p-fluid-md">
    .rounded-3xl
  </div>
  <div class="rounded-4xl border p-fluid-md">
    .rounded-4xl
  </div>
  <div class="rounded-full border p-fluid-md">
    .rounded-full
  </div>
</div>
<script>

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

Border Width#

.border

.border-1

.border-2

Open in Stackblitz

<!doctype html>
<html lang="en" class="scheme-light-dark">
<head>
  <title></title>
</head>
<body class="bg-canvas">

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

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