border-radius: 16px;De CSS Border Radius Generator is een visuele editor voor de eigenschap CSS Border-Raid. Je sleept een schuifregelaar voor elke hoek, bekijkt een voorbeeldelement in realtime en kopieert de exacte CSS die het produceert - geen raadselwaarden en de pagina opnieuw laden.
De eigenschap grensradius ziet er eenvoudig uit, maar heeft een compacte afkorting die mensen omhoog zet: één waarde rondt alle vier de hoeken af, twee waarden stellen de twee diagonalen in en vier waarden lopen met de klok mee vanaf de linkerbovenhoek. Met deze tool kun je elke hoek onafhankelijk instellen en vervolgens automatisch de kortste equivalente steno uitvoeren, zodat je CSS schoon blijft.
Alles draait in uw browser. Begin met een voorinstelling zoals kaart, pil, cirkel of klodder, stem elke hoek af, verander de eenheid tussen pixels en percentages en kopieer de declaratie. Geen account, geen uploads en het blijft offline werken zodra de pagina is geladen.
Kies een voorinstelling zoals afgerond, pil, cirkel of blob voor een onmiddellijk startpunt, of begin vanuit de standaard afgeronde hoeken.
Sleep de schuifregelaars linksboven, rechtsboven, rechtsonder en linksonder om elke hoek onafhankelijk te omzeilen, of stel ze allemaal in op dezelfde waarde voor een uniforme straal.
Schakel tussen PX, %, EM en REM. Percentages Maak elliptische hoeken ten opzichte van de elementgrootte - stel 50% in op alle hoeken om een perfecte cirkel of ellips te maken.
Kopieer de gegenereerde grensradiusverklaring, al samengevouwen tot de kortste geldige steno, en plak deze in uw stylesheet.
Onafhankelijke schuifregelaars voor alle vier de hoeken laten u asymmetrische vormen zoals blad, tab en spraak-bubble stralen bouwen, niet alleen uniforme afronding
De tool vouwt uw vier hoeken automatisch samen tot de kortste equivalente steno van de grensradius, waardoor uw CSS schoon en leesbaar blijft
Schakelen tussen PX, %, EM en REM — Percentages produceren elliptische hoeken ten opzichte van de doosgrootte, zo worden cirkels en blobs gemaakt
Een voorbeeldelement wordt direct bijgewerkt terwijl u sleept, zodat u precies kunt zien hoe de hoeken rond zijn voordat u iets kopieert
Design layered CSS box-shadows with a live preview and sliders for offset, blur, spread, color, opacity, and inset — then copy production-ready CSS.
Create beautiful CSS gradients with live preview
Design layered CSS text-shadows with a live preview and sliders for offset, blur, color, and opacity — build glow, outline, retro 3D, and emboss effects, then copy production-ready CSS.
0 comments
No comments yet. Be the first to share your thoughts!