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