https://github.com/htmlacademy/nebo.css
Negative border radius made easy
https://github.com/htmlacademy/nebo.css
Last synced: 5 months ago
JSON representation
Negative border radius made easy
- Host: GitHub
- URL: https://github.com/htmlacademy/nebo.css
- Owner: htmlacademy
- License: mit
- Created: 2025-04-24T15:53:22.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2025-11-01T14:47:23.000Z (8 months ago)
- Last Synced: 2025-11-01T16:19:02.077Z (8 months ago)
- Language: SCSS
- Size: 37.1 KB
- Stars: 49
- Watchers: 2
- Forks: 11
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# nebo.css
Negative border radius made easy
> Nebo.css is a pure CSS solution that allows you to add a “convex” or “concave” puzzle angle to elements without
> SVG and JavaScript. Everything is controlled via custom CSS variables.
## Features
- ⚡ CSS only — no images or scripts;
- 🎛 Flexible customization via variables:
- `--nb-r` - radius of main rounding;
- `--nb-w` - width of protrusion/cutout;
- `--nb-h` - height of protrusion/cutout;
- `--nb-cor1-rw`, `--nb-cor1-rh` - first corner radius (width/height);
- `--nb-cor2-rw`, `--nb-cor2-rh` - second corner radius (width/height);
- `--nb-curve-rw`, `--nb-curve-rh` - curve radius (width/height);
- 🧩 4 modifiers for angle positioning: `.nebo--tl`, `.nebo--tr`, `.nebo--bl`, `.nebo--br`;
- 🖼 Supports any backgrounds (solid colors, gradients, images);
- 🔧 SCSS mixin for advanced customization: `@include apply-nebo-corner()`.
## Example of use
```html
Card Content
```
```css
.card {
--nb-r: 24px; /* radius of curvature */
--nb-w: 28px; /* protrusion width */
--nb-h: 28px; /* protrusion height */
background: linear-gradient(135deg, #b98bff, #6244d6);
padding: 2rem;
color: #fff;
font: 16px/1.4 "Inter", sans-serif;
}
```
Combine modifiers to get a four-piece puzzle:
```html
```
## SCSS Usage
For more precise control, use the SCSS mixin:
```scss
.custom-puzzle {
@include apply-nebo-corner(
$radius: 24px, // Set all radiuses to 24px
$width: 32px, // Set protrusion width
$height: 28px, // Set protrusion height
$corner: "br" // Position at bottom-right
);
}
.asymmetric-puzzle {
@include apply-nebo-corner(
$cor1-rw: 20px, // First corner width radius
$cor1-rh: 16px, // First corner height radius
$cor2-rw: 24px, // Second corner width radius
$cor2-rh: 20px, // Second corner height radius
$curve-rw: 18px, // Curve width radius
$curve-rh: 14px, // Curve height radius
$width: 30px,
$height: 25px,
$corner: "tl"
);
}
```
## Browser support
| Browser | Version |
|---------|---------|
| Chrome | 60+ |
| Edge | 79+ |
| Firefox | 53+ |
| Safari | 14+ |
## Translations
- [RU](./README_ru.md)
- [EN](./README.md)