0
# Borders & Effects
1

2
PrimeFlex provides comprehensive utilities for borders, border radius, shadows, and visual effects. All border and effect utilities support responsive breakpoints.
3

4
## Border Width
5

6
```scss { .api }
7
// All sides
8
.border-none { border: none; }
9
.border-1 { border-width: 1px; border-style: solid; }
10
.border-2 { border-width: 2px; border-style: solid; }
11
.border-3 { border-width: 3px; border-style: solid; }
12
.border-4 { border-width: 4px; border-style: solid; }
13
.border-5 { border-width: 5px; border-style: solid; }
14
.border-6 { border-width: 6px; border-style: solid; }
15
.border-7 { border-width: 7px; border-style: solid; }
16
.border-8 { border-width: 8px; border-style: solid; }
17

18
// Top border
19
.border-top-none { border-top: none; }
20
.border-top-1 { border-top-width: 1px; border-top-style: solid; }
21
.border-top-2 { border-top-width: 2px; border-top-style: solid; }
22
.border-top-3 { border-top-width: 3px; border-top-style: solid; }
23
.border-top-4 { border-top-width: 4px; border-top-style: solid; }
24
.border-top-5 { border-top-width: 5px; border-top-style: solid; }
25
.border-top-6 { border-top-width: 6px; border-top-style: solid; }
26
.border-top-7 { border-top-width: 7px; border-top-style: solid; }
27
.border-top-8 { border-top-width: 8px; border-top-style: solid; }
28

29
// Right border
30
.border-right-none { border-right: none; }
31
.border-right-1 { border-right-width: 1px; border-right-style: solid; }
32
.border-right-2 { border-right-width: 2px; border-right-style: solid; }
33
.border-right-3 { border-right-width: 3px; border-right-style: solid; }
34
.border-right-4 { border-right-width: 4px; border-right-style: solid; }
35
.border-right-5 { border-right-width: 5px; border-right-style: solid; }
36
.border-right-6 { border-right-width: 6px; border-right-style: solid; }
37
.border-right-7 { border-right-width: 7px; border-right-style: solid; }
38
.border-right-8 { border-right-width: 8px; border-right-style: solid; }
39

40
// Bottom border
41
.border-bottom-none { border-bottom: none; }
42
.border-bottom-1 { border-bottom-width: 1px; border-bottom-style: solid; }
43
.border-bottom-2 { border-bottom-width: 2px; border-bottom-style: solid; }
44
.border-bottom-3 { border-bottom-width: 3px; border-bottom-style: solid; }
45
.border-bottom-4 { border-bottom-width: 4px; border-bottom-style: solid; }
46
.border-bottom-5 { border-bottom-width: 5px; border-bottom-style: solid; }
47
.border-bottom-6 { border-bottom-width: 6px; border-bottom-style: solid; }
48
.border-bottom-7 { border-bottom-width: 7px; border-bottom-style: solid; }
49
.border-bottom-8 { border-bottom-width: 8px; border-bottom-style: solid; }
50

51
// Left border
52
.border-left-none { border-left: none; }
53
.border-left-1 { border-left-width: 1px; border-left-style: solid; }
54
.border-left-2 { border-left-width: 2px; border-left-style: solid; }
55
.border-left-3 { border-left-width: 3px; border-left-style: solid; }
56
.border-left-4 { border-left-width: 4px; border-left-style: solid; }
57
.border-left-5 { border-left-width: 5px; border-left-style: solid; }
58
.border-left-6 { border-left-width: 6px; border-left-style: solid; }
59
.border-left-7 { border-left-width: 7px; border-left-style: solid; }
60
.border-left-8 { border-left-width: 8px; border-left-style: solid; }
61

62
// Horizontal borders (left + right)
63
.border-x-none { border-left: none; border-right: none; }
64
.border-x-1 { border-left-width: 1px; border-right-width: 1px; border-left-style: solid; border-right-style: solid; }
65
.border-x-2 { border-left-width: 2px; border-right-width: 2px; border-left-style: solid; border-right-style: solid; }
66
.border-x-3 { border-left-width: 3px; border-right-width: 3px; border-left-style: solid; border-right-style: solid; }
67
.border-x-4 { border-left-width: 4px; border-right-width: 4px; border-left-style: solid; border-right-style: solid; }
68
.border-x-5 { border-left-width: 5px; border-right-width: 5px; border-left-style: solid; border-right-style: solid; }
69
.border-x-6 { border-left-width: 6px; border-right-width: 6px; border-left-style: solid; border-right-style: solid; }
70
.border-x-7 { border-left-width: 7px; border-right-width: 7px; border-left-style: solid; border-right-style: solid; }
71
.border-x-8 { border-left-width: 8px; border-right-width: 8px; border-left-style: solid; border-right-style: solid; }
72

73
// Vertical borders (top + bottom)
74
.border-y-none { border-top: none; border-bottom: none; }
75
.border-y-1 { border-top-width: 1px; border-bottom-width: 1px; border-top-style: solid; border-bottom-style: solid; }
76
.border-y-2 { border-top-width: 2px; border-bottom-width: 2px; border-top-style: solid; border-bottom-style: solid; }
77
.border-y-3 { border-top-width: 3px; border-bottom-width: 3px; border-top-style: solid; border-bottom-style: solid; }
78
.border-y-4 { border-top-width: 4px; border-bottom-width: 4px; border-top-style: solid; border-bottom-style: solid; }
79
.border-y-5 { border-top-width: 5px; border-bottom-width: 5px; border-top-style: solid; border-bottom-style: solid; }
80
.border-y-6 { border-top-width: 6px; border-bottom-width: 6px; border-top-style: solid; border-bottom-style: solid; }
81
.border-y-7 { border-top-width: 7px; border-bottom-width: 7px; border-top-style: solid; border-bottom-style: solid; }
82
.border-y-8 { border-top-width: 8px; border-bottom-width: 8px; border-top-style: solid; border-bottom-style: solid; }
83
```
84

85
## Border Radius
86

87
```scss { .api }
88
// All corners
89
.border-noround { border-radius: 0; }
90
.border-round-xs { border-radius: 2px; }
91
.border-round-sm { border-radius: 4px; }
92
.border-round { border-radius: 6px; }
93
.border-round-lg { border-radius: 8px; }
94
.border-round-xl { border-radius: 12px; }
95
.border-round-2xl { border-radius: 16px; }
96
.border-round-3xl { border-radius: 24px; }
97
.border-circle { border-radius: 9999px; }
98

99
// Top corners
100
.border-round-top-xs { border-top-left-radius: 2px; border-top-right-radius: 2px; }
101
.border-round-top-sm { border-top-left-radius: 4px; border-top-right-radius: 4px; }
102
.border-round-top { border-top-left-radius: 6px; border-top-right-radius: 6px; }
103
.border-round-top-lg { border-top-left-radius: 8px; border-top-right-radius: 8px; }
104
.border-round-top-xl { border-top-left-radius: 12px; border-top-right-radius: 12px; }
105
.border-round-top-2xl { border-top-left-radius: 16px; border-top-right-radius: 16px; }
106
.border-round-top-3xl { border-top-left-radius: 24px; border-top-right-radius: 24px; }
107

108
// Right corners
109
.border-round-right-xs { border-top-right-radius: 2px; border-bottom-right-radius: 2px; }
110
.border-round-right-sm { border-top-right-radius: 4px; border-bottom-right-radius: 4px; }
111
.border-round-right { border-top-right-radius: 6px; border-bottom-right-radius: 6px; }
112
.border-round-right-lg { border-top-right-radius: 8px; border-bottom-right-radius: 8px; }
113
.border-round-right-xl { border-top-right-radius: 12px; border-bottom-right-radius: 12px; }
114
.border-round-right-2xl { border-top-right-radius: 16px; border-bottom-right-radius: 16px; }
115
.border-round-right-3xl { border-top-right-radius: 24px; border-bottom-right-radius: 24px; }
116

117
// Bottom corners
118
.border-round-bottom-xs { border-bottom-left-radius: 2px; border-bottom-right-radius: 2px; }
119
.border-round-bottom-sm { border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; }
120
.border-round-bottom { border-bottom-left-radius: 6px; border-bottom-right-radius: 6px; }
121
.border-round-bottom-lg { border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; }
122
.border-round-bottom-xl { border-bottom-left-radius: 12px; border-bottom-right-radius: 12px; }
123
.border-round-bottom-2xl { border-bottom-left-radius: 16px; border-bottom-right-radius: 16px; }
124
.border-round-bottom-3xl { border-bottom-left-radius: 24px; border-bottom-right-radius: 24px; }
125

126
// Left corners
127
.border-round-left-xs { border-top-left-radius: 2px; border-bottom-left-radius: 2px; }
128
.border-round-left-sm { border-top-left-radius: 4px; border-bottom-left-radius: 4px; }
129
.border-round-left { border-top-left-radius: 6px; border-bottom-left-radius: 6px; }
130
.border-round-left-lg { border-top-left-radius: 8px; border-bottom-left-radius: 8px; }
131
.border-round-left-xl { border-top-left-radius: 12px; border-bottom-left-radius: 12px; }
132
.border-round-left-2xl { border-top-left-radius: 16px; border-bottom-left-radius: 16px; }
133
.border-round-left-3xl { border-top-left-radius: 24px; border-bottom-left-radius: 24px; }
134
```
135

136
## Box Shadow (Elevation)
137

138
```scss { .api }
139
.shadow-none { box-shadow: none; }
140
.shadow-1 { box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); }
141
.shadow-2 { box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23); }
142
.shadow-3 { box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23); }
143
.shadow-4 { box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22); }
144
.shadow-5 { box-shadow: 0 19px 38px rgba(0, 0, 0, 0.30), 0 15px 12px rgba(0, 0, 0, 0.22); }
145
.shadow-6 { box-shadow: 0 25px 50px rgba(0, 0, 0, 0.35), 0 20px 20px rgba(0, 0, 0, 0.22); }
146
.shadow-7 { box-shadow: 0 30px 60px rgba(0, 0, 0, 0.40), 0 25px 25px rgba(0, 0, 0, 0.22); }
147
.shadow-8 { box-shadow: 0 35px 70px rgba(0, 0, 0, 0.45), 0 30px 30px rgba(0, 0, 0, 0.22); }
148
```
149

150
## Image Object Fit
151

152
```scss { .api }
153
.object-contain { object-fit: contain; }
154
.object-cover { object-fit: cover; }
155
.object-fill { object-fit: fill; }
156
.object-none { object-fit: none; }
157
.object-scale-down { object-fit: scale-down; }
158
```
159

160
## Image Object Position
161

162
```scss { .api }
163
.object-top { object-position: top; }
164
.object-bottom { object-position: bottom; }
165
.object-center { object-position: center; }
166
.object-left { object-position: left; }
167
.object-right { object-position: right; }
168
.object-left-top { object-position: left top; }
169
.object-left-bottom { object-position: left bottom; }
170
.object-right-top { object-position: right top; }
171
.object-right-bottom { object-position: right bottom; }
172
```
173

174
## Cursor
175

176
```scss { .api }
177
.cursor-auto { cursor: auto; }
178
.cursor-default { cursor: default; }
179
.cursor-pointer { cursor: pointer; }
180
.cursor-wait { cursor: wait; }
181
.cursor-text { cursor: text; }
182
.cursor-move { cursor: move; }
183
.cursor-not-allowed { cursor: not-allowed; }
184
.cursor-help { cursor: help; }
185
.cursor-crosshair { cursor: crosshair; }
186
```
187

188
## Pointer Events
189

190
```scss { .api }
191
.pointer-events-none { pointer-events: none; }
192
.pointer-events-auto { pointer-events: auto; }
193
```
194

195
## User Select
196

197
```scss { .api }
198
.select-none { user-select: none; }
199
.select-text { user-select: text; }
200
.select-all { user-select: all; }
201
.select-auto { user-select: auto; }
202
```
203

204
## List Style
205

206
```scss { .api }
207
.list-none { list-style: none; }
208
.list-disc { list-style: disc; }
209
.list-decimal { list-style: decimal; }
210
```
211

212
## Responsive Variants
213

214
All border and effect utilities support responsive breakpoints:
215

216
```scss { .api }
217
// Small screens (≥576px)
218
.sm\\:border-2 { /* border-width: 2px at sm+ */ }
219
.sm\\:border-round-lg { /* border-radius: 8px at sm+ */ }
220
.sm\\:shadow-3 { /* box-shadow: shadow-3 at sm+ */ }
221
// ... all border/effect classes with sm: prefix
222

223
// Medium screens (≥768px)
224
.md\\:border-none { /* border: none at md+ */ }
225
.md\\:border-circle { /* border-radius: 9999px at md+ */ }
226
.md\\:shadow-none { /* box-shadow: none at md+ */ }
227
// ... all border/effect classes with md: prefix
228

229
// Large screens (≥992px)
230
.lg\\:border-4 { /* border-width: 4px at lg+ */ }
231
.lg\\:border-round-2xl { /* border-radius: 16px at lg+ */ }
232
.lg\\:shadow-6 { /* box-shadow: shadow-6 at lg+ */ }
233
// ... all border/effect classes with lg: prefix
234

235
// Extra large screens (≥1200px)
236
.xl\\:border-1 { /* border-width: 1px at xl+ */ }
237
.xl\\:border-round { /* border-radius: 6px at xl+ */ }
238
.xl\\:shadow-2 { /* box-shadow: shadow-2 at xl+ */ }
239
// ... all border/effect classes with xl: prefix
240
```
241

242
## Usage Examples
243

244
### Card with Shadow Elevation
245

246
```html
247
<div class="grid">
248
  <div class="col-12 md:col-4">
249
    <div class="p-4 surface-card border-round shadow-1 hover:shadow-3 transition-all">
250
      <h3 class="m-0 mb-2 text-lg font-semibold">Basic Card</h3>
251
      <p class="m-0 text-color-secondary">Card with subtle shadow that increases on hover</p>
252
    </div>
253
  </div>
254
  
255
  <div class="col-12 md:col-4">
256
    <div class="p-4 surface-card border-round shadow-3">
257
      <h3 class="m-0 mb-2 text-lg font-semibold">Elevated Card</h3>
258
      <p class="m-0 text-color-secondary">Card with medium elevation shadow</p>
259
    </div>
260
  </div>
261
  
262
  <div class="col-12 md:col-4">
263
    <div class="p-4 surface-card border-round shadow-6">
264
      <h3 class="m-0 mb-2 text-lg font-semibold">High Elevation</h3>
265
      <p class="m-0 text-color-secondary">Card with strong elevation shadow</p>
266
    </div>
267
  </div>
268
</div>
269
```
270

271
### Button Variants with Borders
272

273
```html
274
<div class="flex flex-wrap gap-3">
275
  <!-- Solid button -->
276
  <button class="px-4 py-2 bg-primary text-white border-none border-round cursor-pointer">
277
    Solid Button
278
  </button>
279
  
280
  <!-- Outlined button -->
281
  <button class="px-4 py-2 border-2 border-primary text-primary bg-transparent border-round cursor-pointer hover:bg-primary hover:text-white">
282
    Outlined Button
283
  </button>
284
  
285
  <!-- Rounded button -->
286
  <button class="px-6 py-2 bg-green-500 text-white border-none border-round-xl cursor-pointer">
287
    Rounded Button
288
  </button>
289
  
290
  <!-- Circular button -->
291
  <button class="w-3rem h-3rem bg-red-500 text-white border-none border-circle cursor-pointer flex align-items-center justify-content-center">
292
    <i class="pi pi-heart"></i>
293
  </button>
294
</div>
295
```
296

297
### Image Gallery with Object Fit
298

299
```html
300
<div class="grid">
301
  <div class="col-12 md:col-6 lg:col-4">
302
    <div class="border-round overflow-hidden shadow-2">
303
      <img src="landscape.jpg" alt="Landscape" class="w-full h-12rem object-cover">
304
    </div>
305
  </div>
306
  
307
  <div class="col-12 md:col-6 lg:col-4">
308
    <div class="border-round overflow-hidden shadow-2">
309
      <img src="portrait.jpg" alt="Portrait" class="w-full h-12rem object-cover object-top">
310
    </div>
311
  </div>
312
  
313
  <div class="col-12 md:col-6 lg:col-4">
314
    <div class="border-round overflow-hidden shadow-2">
315
      <img src="square.jpg" alt="Square" class="w-full h-12rem object-contain bg-surface-100">
316
    </div>
317
  </div>
318
</div>
319
```
320

321
### Profile Card with Complex Borders
322

323
```html
324
<div class="p-6 surface-card border-round-lg shadow-3 text-center max-w-20rem mx-auto">
325
  <!-- Avatar -->
326
  <div class="relative inline-block mb-4">
327
    <img src="avatar.jpg" alt="Avatar" class="w-6rem h-6rem border-circle object-cover">
328
    <div class="absolute bottom-0 right-0 w-1-5rem h-1-5rem bg-green-500 border-circle border-3 border-white"></div>
329
  </div>
330
  
331
  <!-- Content -->
332
  <h3 class="m-0 mb-2 text-xl font-bold">John Doe</h3>
333
  <p class="m-0 mb-4 text-color-secondary">Software Engineer</p>
334
  
335
  <!-- Action buttons -->
336
  <div class="flex gap-2 justify-content-center">
337
    <button class="px-4 py-2 bg-primary text-white border-none border-round cursor-pointer">
338
      Follow
339
    </button>
340
    <button class="px-4 py-2 border-1 border-surface-300 bg-transparent border-round cursor-pointer">
341
      Message
342
    </button>
343
  </div>
344
</div>
345
```
346

347
### Navigation with Border Accents
348

349
```html
350
<nav class="p-4 surface-section border-bottom-2 border-primary shadow-1">
351
  <div class="flex align-items-center justify-content-between">
352
    <div class="text-xl font-bold text-primary">Brand</div>
353
    
354
    <ul class="flex list-none m-0 p-0 gap-4">
355
      <li>
356
        <a href="#" class="text-color no-underline p-2 border-round cursor-pointer hover:bg-surface-hover">
357
          Home
358
        </a>
359
      </li>
360
      <li>
361
        <a href="#" class="text-color no-underline p-2 border-round cursor-pointer hover:bg-surface-hover border-bottom-2 border-primary">
362
          Active
363
        </a>
364
      </li>
365
      <li>
366
        <a href="#" class="text-color no-underline p-2 border-round cursor-pointer hover:bg-surface-hover">
367
          About
368
        </a>
369
      </li>
370
    </ul>
371
  </div>
372
</nav>
373
```
374

375
### Alert Messages with Border Styles
376

377
```html
378
<div class="flex flex-column gap-3">
379
  <!-- Success alert -->
380
  <div class="p-3 bg-green-50 border-left-4 border-green-500 border-round-right">
381
    <div class="flex align-items-center gap-2">
382
      <i class="pi pi-check-circle text-green-500"></i>
383
      <span class="font-semibold text-green-800">Success!</span>
384
    </div>
385
    <p class="m-0 mt-2 text-sm text-green-700">Operation completed successfully.</p>
386
  </div>
387
  
388
  <!-- Warning alert -->
389
  <div class="p-3 bg-yellow-50 border-left-4 border-yellow-500 border-round-right">
390
    <div class="flex align-items-center gap-2">
391
      <i class="pi pi-exclamation-triangle text-yellow-500"></i>
392
      <span class="font-semibold text-yellow-800">Warning!</span>
393
    </div>
394
    <p class="m-0 mt-2 text-sm text-yellow-700">Please review your input.</p>
395
  </div>
396
  
397
  <!-- Error alert -->
398
  <div class="p-3 bg-red-50 border-left-4 border-red-500 border-round-right">
399
    <div class="flex align-items-center gap-2">
400
      <i class="pi pi-times-circle text-red-500"></i>
401
      <span class="font-semibold text-red-800">Error!</span>
402
    </div>
403
    <p class="m-0 mt-2 text-sm text-red-700">Something went wrong.</p>
404
  </div>
405
</div>
406
```
407

408
### Floating Action Card
409

410
```html
411
<div class="relative">
412
  <!-- Background content -->
413
  <div class="p-6 surface-section border-round">
414
    <h2 class="m-0 mb-4">Background Content</h2>
415
    <p class="m-0">Main content area</p>
416
  </div>
417
  
418
  <!-- Floating card -->
419
  <div class="absolute top-0 right-0 -mt-3 -mr-3 p-4 bg-white border-round shadow-4 pointer-events-auto">
420
    <div class="flex align-items-center gap-2">
421
      <div class="w-2rem h-2rem bg-blue-500 border-circle flex align-items-center justify-content-center">
422
        <i class="pi pi-star text-white text-xs"></i>
423
      </div>
424
      <span class="text-sm font-medium">Featured</span>
425
    </div>
426
  </div>
427
</div>
428
```
429

430
### Responsive Border Radius
431

432
```html
433
<div class="p-4 bg-primary text-white border-round-sm md:border-round-lg lg:border-round-2xl">
434
  <h3 class="m-0 mb-2">Responsive Borders</h3>
435
  <p class="m-0">Border radius increases with screen size</p>
436
</div>
437
```
438

439
### Disabled State with Visual Cues
440

441
```html
442
<div class="flex gap-3">
443
  <button class="px-4 py-2 bg-primary text-white border-none border-round cursor-pointer">
444
    Active Button
445
  </button>
446
  
447
  <button class="px-4 py-2 bg-surface-200 text-surface-500 border-none border-round cursor-not-allowed select-none pointer-events-none">
448
    Disabled Button
449
  </button>
450
  
451
  <div class="px-4 py-2 border-2 border-surface-200 text-surface-400 border-round select-none pointer-events-none">
452
    Disabled Input
453
  </div>
454
</div>
455
```