<style> /* Reset and base styles with high specificity */<br /> .brg-wrapper,<br /> .brg-wrapper *,<br /> .brg-wrapper *::before,<br /> .brg-wrapper *::after {<br /> box-sizing: border-box !important;<br /> margin: 0 !important;<br /> padding: 0 !important;<br /> font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;<br /> line-height: 1.5!important;<br /> }<br /> .brg-wrapper {<br /> --brg-primary: #4150F6 !important;<br /> --brg-primary-light: #6B77F8 !important;<br /> --brg-primary-dark: #3040D6 !important;<br /> --brg-bg: #FFFFFF !important;<br /> --brg-surface: #F8F9FC !important;<br /> --brg-border: #E2E8F0 !important;<br /> --brg-text: #1E293B !important;<br /> --brg-text-muted: #64748B !important;<br /> --brg-shadow: 0 4px 20px rgba(65, 80, 246, 0.08) !important;<br /> --brg-shadow-lg: 0 8px 32px rgba(65, 80, 246, 0.12) !important;<br /> --brg-radius: 16px !important;<br /> --brg-transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;<br /> max-width: 1280px !important;<br /> min-height: auto !important;<br /> margin: 0 auto !important;<br /> padding: 24px !important;<br /> background: var(--brg-bg) !important;<br /> border-radius: var(--brg-radius) !important;<br /> box-shadow: var(--brg-shadow) !important;<br /> overflow: hidden !important;<br /> }<br /> .brg-header {<br /> text-align: center !important;<br /> margin-bottom: 20px !important;<br /> }<br /> .brg-title {<br /> font-size: 22px !important;<br /> font-weight: 700 !important;<br /> color: var(--brg-text) !important;<br /> margin-bottom: 4px !important;<br /> letter-spacing: -0.02em !important;<br /> }<br /> .brg-title span {<br /> color: var(--brg-primary) !important;<br /> }<br /> .brg-subtitle {<br /> font-size: 13px !important;<br /> color: var(--brg-text-muted) !important;<br /> font-weight: 400 !important;<br /> }<br /> .brg-content {<br /> display: grid !important;<br /> grid-template-columns: 1fr 1.2fr 1fr !important;<br /> gap: 24px !important;<br /> align-items: start !important;<br /> }<br /> .brg-controls-left,<br /> .brg-controls-right {<br /> display: flex !important;<br /> flex-direction: column !important;<br /> gap: 16px !important;<br /> }<br /> .brg-slider-group {<br /> background: var(--brg-surface) !important;<br /> padding: 14px 16px !important;<br /> border-radius: 12px !important;<br /> border: 1px solid var(--brg-border) !important;<br /> transition: var(--brg-transition) !important;<br /> }<br /> .brg-slider-group:hover {<br /> border-color: var(--brg-primary-light) !important;<br /> box-shadow: 0 0 0 3px rgba(65, 80, 246, 0.08) !important;<br /> }<br /> .brg-slider-header {<br /> display: flex !important;<br /> justify-content: space-between !important;<br /> align-items: center !important;<br /> margin-bottom: 10px !important;<br /> }<br /> .brg-slider-label {<br /> font-size: 12px !important;<br /> font-weight: 600 !important;<br /> color: var(--brg-text) !important;<br /> text-transform: uppercase !important;<br /> letter-spacing: 0.05em !important;<br /> }<br /> .brg-slider-value {<br /> font-size: 13px !important;<br /> font-weight: 600 !important;<br /> color: var(--brg-primary) !important;<br /> background: rgba(65, 80, 246, 0.1) !important;<br /> padding: 3px 10px !important;<br /> border-radius: 20px !important;<br /> min-width: 52px !important;<br /> text-align: center !important;<br /> }<br /> .brg-slider {<br /> -webkit-appearance: none !important;<br /> appearance: none !important;<br /> width: 100% !important;<br /> height: 6px !important;<br /> background: var(--brg-border) !important;<br /> border-radius: 3px !important;<br /> outline: none !important;<br /> cursor: pointer !important;<br /> transition: var(--brg-transition) !important;<br /> }<br /> .brg-slider::-webkit-slider-thumb {<br /> -webkit-appearance: none !important;<br /> appearance: none !important;<br /> width: 18px !important;<br /> height: 18px !important;<br /> background: var(--brg-primary) !important;<br /> border-radius: 50% !important;<br /> cursor: pointer !important;<br /> box-shadow: 0 2px 8px rgba(65, 80, 246, 0.4) !important;<br /> transition: var(--brg-transition) !important;<br /> border: 3px solid white !important;<br /> }<br /> .brg-slider::-webkit-slider-thumb:hover {<br /> transform: scale(1.15) !important;<br /> box-shadow: 0 4px 12px rgba(65, 80, 246, 0.5) !important;<br /> }<br /> .brg-slider::-moz-range-thumb {<br /> width: 18px !important;<br /> height: 18px !important;<br /> background: var(--brg-primary) !important;<br /> border-radius: 50% !important;<br /> cursor: pointer !important;<br /> box-shadow: 0 2px 8px rgba(65, 80, 246, 0.4) !important;<br /> border: 3px solid white !important;<br /> }<br /> .brg-preview-section {<br /> display: flex !important;<br /> flex-direction: column !important;<br /> align-items: center !important;<br /> gap: 16px !important;<br /> }<br /> .brg-preview-container {<br /> width: 100% !important;<br /> aspect-ratio: 1 !important;<br /> max-width: 220px !important;<br /> max-height: 220px !important;<br /> background: linear-gradient(135deg, var(--brg-surface) 0%, #EEF1FF 100%) !important;<br /> border-radius: var(--brg-radius) !important;<br /> padding: 20px !important;<br /> display: flex !important;<br /> align-items: center !important;<br /> justify-content: center !important;<br /> border: 1px solid var(--brg-border) !important;<br /> }<br /> .brg-preview-box {<br /> width: 100% !important;<br /> height: 100% !important;<br /> background: linear-gradient(135deg, var(--brg-primary) 0%, var(--brg-primary-light) 100%) !important;<br /> transition: border-radius 0.15s ease-out !important;<br /> box-shadow: var(--brg-shadow-lg) !important;<br /> position: relative !important;<br /> overflow: hidden !important;<br /> }<br /> .brg-preview-box::before {<br /> content: '' !important;<br /> position: absolute !important;<br /> top: 0 !important;<br /> left: 0 !important;<br /> right: 0 !important;<br /> bottom: 0 !important;<br /> background: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, transparent 50%) !important;<br /> pointer-events: none !important;<br /> }<br /> .brg-code-section {<br /> background: var(--brg-surface) !important;<br /> border-radius: 12px !important;<br /> border: 1px solid var(--brg-border) !important;<br /> overflow: hidden !important;<br /> }<br /> .brg-code-header {<br /> display: flex !important;<br /> justify-content: space-between !important;<br /> align-items: center !important;<br /> padding: 10px 14px !important;<br /> background: linear-gradient(to right, var(--brg-primary), var(--brg-primary-light)) !important;<br /> }<br /> .brg-code-title {<br /> font-size: 12px !important;<br /> font-weight: 600 !important;<br /> color: white !important;<br /> text-transform: uppercase !important;<br /> letter-spacing: 0.05em !important;<br /> }<br /> .brg-copy-btn {<br /> display: flex !important;<br /> align-items: center !important;<br /> gap: 6px !important;<br /> background: rgba(255, 255, 255, 0.2) !important;<br /> color: white !important;<br /> border: none !important;<br /> padding: 6px 12px !important;<br /> border-radius: 6px !important;<br /> font-size: 12px !important;<br /> font-weight: 500 !important;<br /> cursor: pointer !important;<br /> transition: var(--brg-transition) !important;<br /> backdrop-filter: blur(4px) !important;<br /> }<br /> .brg-copy-btn:hover {<br /> background: rgba(255, 255, 255, 0.35) !important;<br /> transform: translateY(-1px) !important;<br /> }<br /> .brg-copy-btn:active {<br /> transform: translateY(0) !important;<br /> }<br /> .brg-copy-btn.brg-copied {<br /> background: rgba(34, 197, 94, 0.9) !important;<br /> }<br /> .brg-copy-icon {<br /> width: 14px !important;<br /> height: 14px !important;<br /> }<br /> .brg-code-content {<br /> padding: 14px !important;<br /> max-height: 180px !important;<br /> overflow-y: auto !important;<br /> }<br /> .brg-code-content::-webkit-scrollbar {<br /> width: 6px !important;<br /> }<br /> .brg-code-content::-webkit-scrollbar-track {<br /> background: transparent !important;<br /> }<br /> .brg-code-content::-webkit-scrollbar-thumb {<br /> background: var(--brg-border) !important;<br /> border-radius: 3px !important;<br /> }<br /> .brg-code {<br /> font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace !important;<br /> font-size: 12px !important;<br /> line-height: 1.7 !important;<br /> color: var(--brg-text) !important;<br /> white-space: pre-wrap !important;<br /> word-break: break-all !important;<br /> }<br /> .brg-code .brg-property {<br /> color: var(--brg-primary) !important;<br /> }<br /> .brg-code .brg-value {<br /> color: #059669 !important;<br /> }<br /> .brg-actions {<br /> display: flex !important;<br /> gap: 10px !important;<br /> margin-top: 8px !important;<br /> }<br /> .brg-btn {<br /> flex: 1 !important;<br /> padding: 10px 16px !important;<br /> border-radius: 10px !important;<br /> font-size: 13px !important;<br /> font-weight: 600 !important;<br /> cursor: pointer !important;<br /> transition: var(--brg-transition) !important;<br /> border: none !important;<br /> display: flex !important;<br /> align-items: center !important;<br /> justify-content: center !important;<br /> gap: 6px !important;<br /> min-width: fit-content;<br /> }<br /> .brg-btn-primary {<br /> background: linear-gradient(135deg, var(--brg-primary) 0%, var(--brg-primary-light) 100%) !important;<br /> color: white !important;<br /> box-shadow: 0 4px 14px rgba(65, 80, 246, 0.35) !important;<br /> }<br /> .brg-btn-primary:hover {<br /> transform: translateY(-2px) !important;<br /> box-shadow: 0 6px 20px rgba(65, 80, 246, 0.45) !important;<br /> }<br /> .brg-btn-secondary {<br /> background: var(--brg-bg) !important;<br /> color: var(--brg-text) !important;<br /> border: 1px solid var(--brg-border) !important;<br /> }<br /> .brg-btn-secondary:hover {<br /> border-color: var(--brg-primary) !important;<br /> color: var(--brg-primary) !important;<br /> background: rgba(65, 80, 246, 0.05) !important;<br /> }<br /> /* Corner indicators */<br /> .brg-corner-indicator {<br /> display: flex !important;<br /> align-items: center !important;<br /> gap: 6px !important;<br /> margin-bottom: 6px !important;<br /> }<br /> .brg-corner-dot {<br /> width: 8px !important;<br /> height: 8px !important;<br /> border-radius: 50% !important;<br /> background: var(--brg-primary) !important;<br /> }<br /> .brg-corner-dot.brg-top-left { border-radius: 50% 0 0 0 !important; }<br /> .brg-corner-dot.brg-top-right { border-radius: 0 50% 0 0 !important; }<br /> .brg-corner-dot.brg-bottom-right { border-radius: 0 0 50% 0 !important; }<br /> .brg-corner-dot.brg-bottom-left { border-radius: 0 0 0 50% !important; }<br /> /* Responsive styles */<br /> @media screen and (max-width: 900px) {<br /> .brg-wrapper {<br /> max-height: none !important;<br /> padding: 20px !important;<br /> }<br /> .brg-content {<br /> grid-template-columns: 1fr 1fr !important;<br /> grid-template-rows: auto auto !important;<br /> }<br /> .brg-preview-section {<br /> grid-column: 1 / -1 !important;<br /> grid-row: 1 !important;<br /> }<br /> .brg-preview-container {<br /> max-width: 180px !important;<br /> max-height: 180px !important;<br /> }<br /> }<br /> @media screen and (max-width: 600px) {<br /> .brg-wrapper {<br /> padding: 16px !important;<br /> border-radius: 12px !important;<br /> }<br /> .brg-content {<br /> grid-template-columns: 1fr !important;<br /> gap: 16px !important;<br /> }<br /> .brg-preview-section {<br /> order: 1 !important;<br /> }<br /> .brg-controls-left {<br /> order: 2 !important;<br /> }<br /> .brg-controls-right {<br /> order: 3 !important;<br /> }<br /> .brg-title {<br /> font-size: 18px !important;<br /> }<br /> .brg-subtitle {<br /> font-size: 12px !important;<br /> }<br /> .brg-preview-container {<br /> max-width: 160px !important;<br /> max-height: 160px !important;<br /> }<br /> .brg-slider-group {<br /> padding: 12px 14px !important;<br /> }<br /> .brg-actions {<br /> flex-direction: column !important;<br /> }<br /> .brg-code-content {<br /> max-height: 150px !important;<br /> }<br /> }<br /> /* Toast notification */<br /> .brg-toast {<br /> position: fixed !important;<br /> bottom: 24px !important;<br /> left: 50% !important;<br /> transform: translateX(-50%) translateY(100px) !important;<br /> background: var(--brg-text) !important;<br /> color: white !important;<br /> padding: 12px 24px !important;<br /> border-radius: 10px !important;<br /> font-size: 13px !important;<br /> font-weight: 500 !important;<br /> box-shadow: 0 10px 40px rgba(0,0,0,0.2) !important;<br /> opacity: 0 !important;<br /> transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;<br /> z-index: 9999 !important;<br /> pointer-events: none !important;<br /> }<br /> .brg-toast.brg-show {<br /> opacity: 1 !important;<br /> transform: translateX(-50%) translateY(0) !important;<br /> }<br /> .jnews_inline_related_post_wrapper.right {<br /> display: none;<br /> }<br /> </style> <header> <h1>CSS Border Radius Generator - CSS Rounded Corners</h1> Create beautiful css rounded corners for your UI elements </header><label for="brg-top-left">Top Left</label> 20px <input id="brg-top-left" max="150" min="0" type="range" value="20" /> <label for="brg-bottom-left">Bottom Left</label> 20px <input id="brg-bottom-left" max="150" min="0" type="range" value="20" /> CSS Code <button id="brg-copy-btn"></button> Copy <code id="brg-code-output"></code> <button></button> Reset Copy CSS <label for="brg-top-right">Top Right</label> 20px <input id="brg-top-right" max="150" min="0" type="range" value="20" /> <label for="brg-bottom-right">Bottom Right</label> 20px <input id="brg-bottom-right" max="150" min="0" type="range" value="20" /> ✓ CSS copied to clipboard!
