Border Radius View - React / Styled Components

O Border Radius Previewer permite que o usuário visualizar como os valores de raio da borda CSS3 afetam um elemento. A propriedade border-radius pode ter vários valores alterados. Visualize a aparência da forma ao alterar esses valores.

Esse projeto foi baseado na ideia do repositorio App Ideas Collection.

Quer ver como ficou o código?
como eu fiz para criei esses conversores?
acesse o link dessa pagina no github. Border Radius Previewer

border-radius: 0px 0px 0px 0px;

Código React

Para facilitar a vida de todo mundo, eu adicionei o codigo do component React pronto usando Styled Component. É só Copiar/Colar e sair usando.

BorderRadius.js

import React from "react" import * as S from "./styled" const BorderRadius = () => <S.BorderRadius /> ) export default BorderRadius

styled.js

import styled from "styled-components" export const BorderWrapper = styled.div` border-radius: 0px 0px 0px 0px; background-color: #f8f8f2; border: rgba(155,0,255,1) solid 1px; height: 100%; width: 100%; `;