CSS
HTML
COMPONENTS
CODE HUB
CSS Border Radius Generator
Configuration
Border Radius: 50px
Class
Preview
Code
border-radius: 50px;Learn to Code with Lara
Master programming concepts step-by-step with your interactive AI tutor. Lara explains complex logic, reviews your practice exercises, and helps you build a solid foundation in software development.
Interactive coding lessons tailored to your own pace.
Start learning with LaraCSS Border Radius Generator
In CSS, the border-radius property is used to control the roundness of the corners of an HTML element. It allows you to create elements with rounded corners, giving your design a softer and more visually appealing appearance.
The border-radius property can accept one or two values, which determine the radii for the four corners of the element. If you provide two values, the first value sets the horizontal radius, and the second value sets the vertical radius. If you provide just one value, it sets both the horizontal and vertical radii, making all corners equally rounded.
Here's the basic syntax:
.rounded-element {
border-radius: 10px;
}
.rounded-element {
border-radius: 10px 20px;
}
.rounded-element {
border-radius: 10px 20px 30px 40px;
}In this example:
The .rounded-element class sets the border radius of the element.
You can control the degree of roundness by adjusting the values. If you provide four values for each corner individually, you can specify unique radii for each corner, allowing you to create more complex shapes with rounded corners.
The border-radius property is commonly used for creating buttons, cards, and other UI elements to soften the appearance and improve the visual design of web pages.