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%;
`;