Css rounded top corners

Creating rounded corners for top half of the buttons in CSS

I would like to make rounded corners only for the top half of buttons. I know how to make rounded corners for all sides using border-radius and -webkit-border-radius . But only like to have corners for the top half. I need some guidance on how to do this in CSS.

minimal reproducible example border-radius: 3px 3px 0 0; Just remember the acronym «TRBL» or the mnemonic «rounded buttons are trouble» for Top(left) Right Bottom(right) Left. Basically moving clockwise.

7 Answers 7

When I want to round specific corners I use code below

border-radius: 10px 10px 0 0; // top-left top-right bottom-right bottom-left. 

You can use the following styling rules:

border-top-left-radius border-top-right-radius 

Note: The border-radius rule works without the -webkit- bit.

Here’s the pattern I like to use:

.round-corners-5px < -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; >.round-corners-10px < -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; >.unround-top-corners < -webkit-border-top-left-radius: 0px; -webkit-border-top-right-radius: 0px; -moz-border-radius-topleft: 0px; -moz-border-radius-topright: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px; >.unround-bottom-corners

There are specific variants of the border-radius css tag for this:

border-top-left-radius:2em; border-top-right-radius:2em; 

@JGallardo what if the user needs to inherit the border radius for the bottom left/right, can we do border-radius: 2em 2em inherit inherit ? That’s still pretty long, and less readable (for people who can never remember the ordering of all 4 properties).

If you want to round only certain corners, this is the code for it:

border-radius:5px 5px 5px 5px; 

The first value is for the top left corner, second for the top right corner, third for the bottom left corner and fourth for the bottom right corner.

If you use sass scss, then you could write it once and reuse it as a simple line of code like this:

In your sass or scss file, define mixin like this:

@mixin rounded($amount: "10px",$position: null) < @if $position != null < @if $position == "top" or $position == "bottom" < //top or bottom -webkit-border-#-left-radius: $amount; -moz-border-#-left-radius: $amount; border-#-left-radius: $amount; -webkit-border-#-right-radius: $amount; -moz-border-#-right-radius: $amount; border-#-right-radius: $amount; > @else < // top-left or top-right or bottom-left or bottom-right -webkit-border-#-radius: $amount; -moz-border-#-radius: $amount; border-#-radius: $amount; > > @else < // ALL IF EMPTY -webkit-border-radius: $amount; -moz-border-radius: $amount; border-radius: $amount; >> 

Then in the scss file you can use mixin like so:

 @include rounded(); /*as default 10px on all corners*/ @include rounded(15px); /*all corners*/ @include rounded(15px, top); /*all top corners*/ @include rounded(15px, bottom); /* all bottom corners*/ @include rounded(15px, top-right); /*this corner only*/ @include rounded(15px, top-left); /*this corner only*/ @include rounded(15px, bottom-right); /*this corner only*/ @include rounded(15px, bottom-left); /*this corner only*/ 

This .scss code will generate this .css code:

 /* as default 10px on all corners */ -webkit-border-radius: "10px"; -moz-border-radius: "10px"; border-radius: "10px"; /* all corners */ -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px; /* all top corners */ -webkit-border-top-left-radius: 15px; -moz-border-top-left-radius: 15px; border-top-left-radius: 15px; -webkit-border-top-right-radius: 15px; -moz-border-top-right-radius: 15px; border-top-right-radius: 15px; /* all bottom corners */ -webkit-border-bottom-left-radius: 15px; -moz-border-bottom-left-radius: 15px; border-bottom-left-radius: 15px; -webkit-border-bottom-right-radius: 15px; -moz-border-bottom-right-radius: 15px; border-bottom-right-radius: 15px; /* top-right corner only */ -webkit-border-top-right-radius: 15px; -moz-border-top-right-radius: 15px; border-top-right-radius: 15px; /* top-left corner only */ -webkit-border-top-left-radius: 15px; -moz-border-top-left-radius: 15px; border-top-left-radius: 15px; /* bottom-right corner only */ -webkit-border-bottom-right-radius: 15px; -moz-border-bottom-right-radius: 15px; border-bottom-right-radius: 15px; /* bottom-left corner only */ -webkit-border-bottom-left-radius: 15px; -moz-border-bottom-left-radius: 15px; border-bottom-left-radius: 15px; > 

Источник

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

Источник

border-radius

The border-radius CSS property rounds the corners of an element’s outer border edge. You can set a single radius to make circular corners, or two radii to make elliptical corners.

Try it

The radius applies to the whole background , even if the element has no border; the exact position of the clipping is defined by the background-clip property.

The border-radius property does not apply to table elements when border-collapse is collapse .

Note: As with any shorthand property, individual sub-properties cannot inherit, such as in border-radius:0 0 inherit inherit , which would partially override existing definitions. Instead, the individual longhand properties have to be used.

Constituent properties

This property is a shorthand for the following CSS properties:

Syntax

/* The syntax of the first radius allows one to four values */ /* Radius is set for all 4 sides */ border-radius: 10px; /* top-left-and-bottom-right | top-right-and-bottom-left */ border-radius: 10px 5%; /* top-left | top-right-and-bottom-left | bottom-right */ border-radius: 2px 4px 2px; /* top-left | top-right | bottom-right | bottom-left */ border-radius: 1px 0 3px 4px; /* The syntax of the second radius allows one to four values */ /* (first radius values) / radius */ border-radius: 10px / 20px; /* (first radius values) / top-left-and-bottom-right | top-right-and-bottom-left */ border-radius: 10px 5% / 20px 30px; /* (first radius values) / top-left | top-right-and-bottom-left | bottom-right */ border-radius: 10px 5px 2em / 20px 25px 30%; /* (first radius values) / top-left | top-right | bottom-right | bottom-left */ border-radius: 10px 5% / 20px 25em 30px 35em; /* Global values */ border-radius: inherit; border-radius: initial; border-radius: revert; border-radius: revert-layer; border-radius: unset; 

The border-radius property is specified as:

Values

radius		Is a or a denoting a radius to use for the border in each corner of the border. It is used only in the one-value syntax.
top-left-and-bottom-right		Is a or a denoting a radius to use for the border in the top-left and bottom-right corners of the element’s box. It is used only in the two-value syntax.
top-right-and-bottom-left		Is a or a denoting a radius to use for the border in the top-right and bottom-left corners of the element’s box. It is used only in the two- and three-value syntaxes.
top-left		Is a or a denoting a radius to use for the border in the top-left corner of the element’s box. It is used only in the three- and four-value syntaxes.
top-right		Is a or a denoting a radius to use for the border in the top-right corner of the element’s box. It is used only in the four-value syntax.
bottom-right		Is a or a denoting a radius to use for the border in the bottom-right corner of the element’s box. It is used only in the three- and four-value syntaxes.
bottom-left		Is a or a denoting a radius to use for the border in the bottom-left corner of the element’s box. It is used only in the four-value syntax.

Denotes the size of the circle radius, or the semi-major and semi-minor axes of the ellipse, using length values. Negative values are invalid.

Denotes the size of the circle radius, or the semi-major and semi-minor axes of the ellipse, using percentage values. Percentages for the horizontal axis refer to the width of the box; percentages for the vertical axis refer to the height of the box. Negative values are invalid.

border-radius: 1em/5em; /* It is equivalent to: */ border-top-left-radius: 1em 5em; border-top-right-radius: 1em 5em; border-bottom-right-radius: 1em 5em; border-bottom-left-radius: 1em 5em; 

border-radius: 4px 3px 6px / 2px 4px; /* It is equivalent to: */ border-top-left-radius: 4px 2px; border-top-right-radius: 3px 4px; border-bottom-right-radius: 6px 2px; border-bottom-left-radius: 3px 4px; 

Formal definition

• border-top-left-radius : 0
• border-top-right-radius : 0
• border-bottom-right-radius : 0
• border-bottom-left-radius : 0

• border-bottom-left-radius : two absolute s or s
• border-bottom-right-radius : two absolute s or s
• border-top-left-radius : two absolute s or s
• border-top-right-radius : two absolute s or s

• border-top-left-radius : a length, percentage or calc();
• border-top-right-radius : a length, percentage or calc();
• border-bottom-right-radius : a length, percentage or calc();
• border-bottom-left-radius : a length, percentage or calc();

Formal syntax

Examples

pre id="example-1"> border: solid 10px; border-radius: 10px 40px 40px 10px; pre> pre id="example-2"> border: groove 1em red; border-radius: 2em; pre> pre id="example-3"> background: gold; border: ridge gold; border-radius: 13em/3em; pre> pre id="example-4"> border: none; border-radius: 40px 10px; background: gold; pre> pre id="example-5"> border: none; border-radius: 50%; background: burlywood; pre> pre id="example-6"> border: dotted; border-width: 10px 4px; border-radius: 10px 40px; pre> pre id="example-7"> border: dashed; border-width: 2px 4px; border-radius: 40px; pre> 

pre  margin: 20px; padding: 20px; width: 80%; height: 80px; > pre#example-1  border: solid 10px; border-radius: 10px 40px 40px 10px; > pre#example-2  border: groove 1em red; border-radius: 2em; > pre#example-3  background: gold; border: ridge gold; border-radius: 13em/3em; > pre#example-4  border: none; border-radius: 40px 10px; background: gold; > pre#example-5  border: none; border-radius: 50%; background: burlywood; > pre#example-6  border: dotted; border-width: 10px 4px; border-radius: 10px 40px; > pre#example-7  border: dashed; border-width: 2px 4px; border-radius: 40px; > 

Live Samples

Specifications

Browser compatibility

BCD tables only load in the browser

Источник