Html and round corners

CSS Rounded Corners

With the CSS border-radius property, you can give any element «rounded corners».

CSS border-radius Property

The CSS border-radius property defines the radius of an element’s corners.

Tip: This property allows you to add rounded corners to elements!

1. Rounded corners for an element with a specified background color:

2. Rounded corners for an element with a border:

3. Rounded corners for an element with a background image:

Example

#rcorners1 <
border-radius: 25px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
>

#rcorners2 border-radius: 25px;
border: 2px solid #73AD21;
padding: 20px;
width: 200px;
height: 150px;
>

#rcorners3 border-radius: 25px;
background: url(paper.gif);
background-position: left top;
background-repeat: repeat;
padding: 20px;
width: 200px;
height: 150px;
>

Tip: The border-radius property is actually a shorthand property for the border-top-left-radius , border-top-right-radius , border-bottom-right-radius and border-bottom-left-radius properties.

CSS border-radius — Specify Each Corner

The border-radius property can have from one to four values. Here are the rules:

Four values — border-radius: 15px 50px 30px 5px; (first value applies to top-left corner, second value applies to top-right corner, third value applies to bottom-right corner, and fourth value applies to bottom-left corner):

Three values — border-radius: 15px 50px 30px; (first value applies to top-left corner, second value applies to top-right and bottom-left corners, and third value applies to bottom-right corner):

Two values — border-radius: 15px 50px; (first value applies to top-left and bottom-right corners, and the second value applies to top-right and bottom-left corners):

One value — border-radius: 15px; (the value applies to all four corners, which are rounded equally:

Example

#rcorners1 <
border-radius: 15px 50px 30px 5px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
>

#rcorners2 border-radius: 15px 50px 30px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
>

#rcorners3 border-radius: 15px 50px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
>

#rcorners4 border-radius: 15px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
>

You could also create elliptical corners:

Example

#rcorners1 <
border-radius: 50px / 15px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
>

#rcorners2 border-radius: 15px / 50px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
>

#rcorners3 border-radius: 50%;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
>

CSS Rounded Corners Properties

Property	Description
border-radius	A shorthand property for setting all the four border-*-*-radius properties
border-top-left-radius	Defines the shape of the border of the top-left corner
border-top-right-radius	Defines the shape of the border of the top-right corner
border-bottom-right-radius	Defines the shape of the border of the bottom-right corner
border-bottom-left-radius	Defines the shape of the border of the bottom-left corner

Источник

How to create fancy corners with CSS

CSS can do amazing things. Creating fancy corners is one of them. With a just few lines of CSS code, you can easily beautify the corners of HTML elements and create stunning visuals for users to interact with.

In this tutorial, we’ll first demonstrate how to create rounded corners and then show how you can apply these concepts to create your own designs — what I like to call fancy corners.

To start, let’s create a simple box centered in the so we can experiment with its corners.

Now we’ll use this box as a model to build five types of fancy corners: rounded, notched, scooped, inverted, and random. Let’s get started!

1. Rounded corners

border-radius is the fundamental CSS property to create rounded corners. You may have already used it. Here’s an overview of the property:

/* sets radius of all 4 corners */ border-radius: 10px; /* top-left top-right bottom-right bottom-left */ border-radius: 10px 15px 15px 10px;

You can use border-radius directly to create rounded corners.

You can also set different values to each corner.

If you only want one corner to be rounded, for example, you can set one of the following CSS properties.

What about a circle? User avatars, for instance, are often displayed within circles. You’ll first need to create a square to make a perfect circle.

2. Notched corners

Going beyond the border-radius property, you can utilize pseudo-elements such as the box-shadow property to create different types of corners.

When using this method, you can only change one side of the box. You’ll see why.

Next, use the :after pseudo-element to create a border.

Set overflow:hidden on the box to hide the overflowed parts of its child elements.

Now for the most interesting part: using box-shadow to fill the background.

Here we created a large shadow around the psuedo-element without any blur (second 0 parameter), so we get an enlarged copy of the element around it. Thanks to the overflow:hidden in the box, anything outside of it is hidden. You should get something like this:

Finally, remove the background colors from the box and pseudo-elements. The background color is set in the box-shadow property ( #522d5b in our case).

Over 200k developers use LogRocket to create better digital experiences

Learn more →

You’ll notice that you’re limited to one corner with this method. How do you notch all four corners? There are two methods:

1. Use SVG, which is not within the scope of this article
2. Use clip-path , which is easy but has less browser support

Creating nootched corners with clip-path

The clip-path property determines what region to show in an element. You can use it with the polygon() function to create a notched corner (or anything else with complex values).

Instead of repeating the same percentages, you can either use CSS variables or SCSS variables.

3. Scooped corners

Creating scooped corners is similar to creating notched coners. Instead of using a rotated sqaure as the pseudo-element, you can use a circle.

However, if you need to scoop all four corners, your best bet is to use SVG.

4. Inverted corners

You can use the same method again, with a few tweaks.

To create the psuedo-element:

The next step is to fill the small part between the pseudo-element and remove the background color. We can use the box-shadow property to do that.

In box-shadow , we set x , spread , and blur to zero and y to 20px (half of the height). Therefore, the box shadow is a copy of the pseudo-element shown below it. When using the same color for box-shadow as the box, the access part hides.

This type of design is perfect for speech bubbles.

5. Random corners

Did you know that you can create interesting shapes like guitar picks and organic cells with nothing more than border-radius ?

border-radius supports eight values seperated by a slash. According to W3C:

If values are given before and after the slash, then the values before the slash set the horizontal radius and the values after the slash set the vertical radius. If there is no slash, then the values set both radii equally.

Start by creating a simple square.

The easiest way to create a random corner is to use four values.

In this example, you can see that all the corners have the same roundness across the vertical and horizontal axes. There are eight values in border-radius you can use to change it.

This lesser-know feature is very effective in creating beautiful corners. If you’re bored and feel like playing with the values to create random corners, try messing around with this visual tool.

Conclusion

As you can see, it’s possible to create all kinds of interesting corners — from simple rounded ones to snazzy, random designs — using nothing more than border-radius , box-shadow , and pseudo-elements. You can take the basic tools you learned today and evolve your skills to create awesome, unique designs, especially for your next landing page project.

What’s your favorite type of fancy corner?

Is your frontend hogging your users’ CPU?

As web frontends get increasingly complex, resource-greedy features demand more and more from the browser. If you’re interested in monitoring and tracking client-side CPU usage, memory usage, and more for all of your users in production, try LogRocket.https://logrocket.com/signup/

LogRocket is like a DVR for web and mobile apps, recording everything that happens in your web app, mobile app, or website. Instead of guessing why problems happen, you can aggregate and report on key frontend performance metrics, replay user sessions along with application state, log network requests, and automatically surface all errors.

Modernize how you debug web and mobile apps — Start monitoring for free.

Источник

How to round div corners using CSS

Today, I’d like to show you how to easily round corners in HTML elements using CSS. 😊 Before we start, I would highly recommend you to check out the runnable examples for the solution on our website:
How to round div corners using CSS Final effect: There are several ways to round element depending on which corners you want to round.

Round each corner with the same value

In this solution, we use border-radius property with one value to round each corner of the div with the given value. Practical example:

    div  height: 100px; width: 120px; background-color: #b5edc2; border-radius: 25px; /*  use this to round all corners in div */ >    

Round diagonally opposite corners

In this solution, we use border-radius property with two values to round diagonally opposite corners of the div with two different values. Practical example:

    div  height: 100px; width: 120px; background-color: #b5edc2; border-radius: 25px 45px; /*  use this to round the opposite corners */ >    

Round each corner with a different value

In this solution, we use border-radius property with four values to round each corner of the div with a different value, clockwise.

Practical example:

    div  height: 100px; width: 120px; background-color: #b5edc2; border-radius: 10px 30px 20px 40px; /*  use this to round all corners in div */ >    

Custom rounded corners

• first value describes top-left corner — 20px radius,
• second value describes opposite top-right and bottom-left corners — 45px radius,
• third value describes bottom-right corner — 30px radius.

    div  height: 100px; width: 120px; background-color: #b5edc2; border-radius: 20px 45px 30px; /*  use this to round corners*/ >    

You can also manually specify which corner you want to round with given value like this:

    div  height: 100px; width: 120px; background-color: #b5edc2; border-top-left-radius: 25px; /*  top-left corner round */ border-top-right-radius: 30px; /*  top-right corner round */ border-bottom-right-radius: 40px; /*  bottom-right corner round */ border-bottom-left-radius: 50px; /*  bottom-left corner round */ >    

Circle div example

We can also use border-radius property with percentage values. In this solution I’ve set the property value to 50% to make a circle div.

    div  height: 100px; width: 100px; background-color: #b5edc2; border-radius: 50%; /*  use this to make circle div (NOTE: height=width) */ >    

If you found this solution useful let me know in the comment section or leave a reaction 💗🦄💾.
Thanks for reading and see you in the upcoming posts! 😊🔜

Write to us! ✉

If you have any problem to solve or questions that no one can answer related to a React or JavaScript topic, or you’re looking for a mentoring write to us on dirask.com -> Questions

You can also join our facebook group where we share coding tips and tricks with others! 🔥

Источник