https://github.com/ryanve/sharp.css

CSS sharp corners
https://github.com/ryanve/sharp.css

border border-radius css fcss functional-css opensource rounded-corners

Last synced: about 1 month ago
JSON representation

CSS sharp corners

• Host: GitHub
• URL: https://github.com/ryanve/sharp.css
• Owner: ryanve
• License: cc0-1.0
• Created: 2017-07-23T21:43:46.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2021-10-10T16:44:15.000Z (about 3 years ago)
• Last Synced: 2024-10-10T09:27:07.120Z (about 1 month ago)
• Topics: border, border-radius, css, fcss, functional-css, opensource, rounded-corners
• Language: CSS
• Homepage: https://ryanve.github.io/sharp.css
• Size: 13.7 KB
• Stars: 2
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# sharp.css

CSS [border-radius](https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius) border classes

```

npm install sharp.css

```

```css

@import "node_modules/sharp.css/sharp";

```

* Load [sharp.css](sharp.css) after your rounded corner implementation. [See demo.](https://ryanve.github.io/sharp.css/)

* Keep [contour bias](https://graphicdesign.stackexchange.com/a/84943/100255) in mind when designing corners.

## [classes](sharp.css)

### `.sharp-all`

Sharpen all corners.

### `.sharp-top`

Sharpen top corners.

### `.sharp-bottom`

Sharpen bottom corners.

### `.sharp-left`

Sharpen left corners.

### `.sharp-right`

Sharpen right corners.

### `.sharp-stack`

Sharpen vertical interior corners.

### `.sharp-shelf`

Sharpen horizontal interior corners.

## [demos](https://ryanve.dev)

* [sharp](https://ryanve.dev/sharp.css)

* [spacing](https://ryanve.dev/spacing)