Border radius property
The CSS border-radius property rounds the corners of an element’s border, creating smoother edges, with values specifying the curvature radius.
Syntax:
border-radius: value;
Example : In this example A single <h1> heading has a solid border, centered text (using `text-align`), a green background, and rounded corners (using `border-radius`), creating a visually appealing header element.
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
border-style: solid;
text-align: center;
background: green;
border-radius: 20px;
}
</style>
</head>
<body>
<h1>w3wiki</h1>
</body>
</html>
Output:
CSS Borders
CSS borders are used to define an element’s boundary, providing visual separation and structure to web content. Borders can be customized in terms of width, style, and color, allowing for a wide range of design possibilities. Common border styles include solid, dashed, dotted, and double.
This Borders in CSS article will teach us about CSS borders, covering styling options, practical use cases, and best practices.
Table of Content
- Border Properties
- Ways to Style Border in CSS
- Common Border Styles
- CSS Border Width
- CSS Border Color
- CSS Border individual sides:
- Border radius property
- Practical Use Cases
- CSS Borders Use Cases
Contact Us