Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Rounded corners only on some corners in css

Tags:

css

Is it possible to create a rounded corner using css where I only get rounding on some specific corner rather than all of the corners? Currently I am using:

  -webkit-border-radius: 7px;
  -moz-border-radius: 7px;
  border-radius: 7px;

But I don't see any way to specifying the top left or some other corner. I want the other corners to remain square.

like image 383
Johann Avatar asked Aug 15 '13 05:08

Johann


People also ask

What CSS property gives rounded corners?

The border-radius CSS property rounds the corners of an element's outer border edge.

How do I fix border radius in CSS?

CSS Syntaxborder-radius: 1-4 length|% / 1-4 length|%|initial|inherit; Note: The four values for each radius are given in the order top-left, top-right, bottom-right, bottom-left. If bottom-left is omitted it is the same as top-right. If bottom-right is omitted it is the same as top-left.

How do you set only the top border radius in CSS?

CSS Syntaxborder-top-left-radius: length|% [length|%]|initial|inherit; Note: If you set two values, the first one is for the top border, and the second one for the left border. If the second value is omitted, it is copied from the first. If either length is zero, the corner is square, not rounded.


4 Answers

You can do it like

border-radius: 5px 10px 15px 20px; /* This is a short hand syntax */

The above syntax works like a fan, starting from 5px and ends on 20px, just added a diagram below, the arrow in there depicts the start of the shorthand syntax flow.

enter image description here

Demo

To specify a particular radius, you can use property like

border-top-left-radius: 10px;

Which is equivalent to

border-radius: 10px 0 0 0;
like image 194
Mr. Alien Avatar answered Oct 20 '22 18:10

Mr. Alien


Try using this : -

border-radius: <specific_value>px <specific_value>px <specific_value>px <specific_value>px 

these 4 values represent the different corners in a clock-wise manner .

like image 41
Anurag-Sharma Avatar answered Oct 20 '22 18:10

Anurag-Sharma


You can use: DEMO

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

    border-radius: 5px 0 10px 0;
    

    enter image description here

For more information visit this website.

like image 1
Brian Avatar answered Oct 20 '22 16:10

Brian


.rounded-corners {
   -moz-border-radius: 20px;
   -webkit-border-radius: 20px;\
    border-radius: 20px;
}

Changes can be made like this,

    -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;
    -webkit-border-bottom-left-radius: 0px;
    -webkit-border-bottom-right-radius: 0px;
    -moz-border-radius-bottomleft: 0px;
    -moz-border-radius-bottomright: 0px;
     border-bottom-left-radius: 0px;
     border-bottom-right-radius: 0px;
like image 1
Sobin Augustine Avatar answered Oct 20 '22 17:10

Sobin Augustine