Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
This question does not appear to be about programming within the scope defined in the help center.
Closed 8 years ago.
Improve this question
is this possible to make a div distort with rounded corners.
all the corner are different radius?
any jquery link or css
which will be cross browers
I try my best for the solution but dint find it
any help
Yes!! You can set different border-radius for all corner using css like this
div{
border-top-left-radius:5px;
border-top-right-radius:7px;
border-bottom-left-radius:10px;
border-bottom-right-radius:12px;
}
Js Fiddle example
Update:
The effect of the picture which you have shared in your comment requires two properties of css
1. border-radius
2. transform
So here is code to achieve this
div
{
border-top-left-radius:10px;
border-top-right-radius:10px;
border-bottom-left-radius:50px;
border-bottom-right-radius:10px;
background-color:Gray;
height:200px;
width:350px;
transform:rotate(-15deg);
-webkit-transform: rotate(-15deg);
}
Updated Js Fiddle
You can do it with CSS
div {
border-radius: 1px 2px 3px 4px; /* top-left top-right bottom-right bottom-left */
}
MDN is a very good resource for looking up css / js specs. For jquery use their official docs
For cross browser you need to add all browser CSS definitions.
-webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 20px;
-webkit-border-bottom-right-radius: 40px;
-webkit-border-bottom-left-radius: 30px;
-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 20px;
-moz-border-radius-bottomright: 40px;
-moz-border-radius-bottomleft: 30px;
border-top-left-radius: 10px;
border-top-right-radius: 20px;
border-bottom-right-radius: 40px;
border-bottom-left-radius: 30px;
DEMO http://jsfiddle.net/kevinPHPkevin/WVBTJ/
Related
I have revolution Slider on a Wordpress CMS. I've implemented custom css in the Revolution Slider panel. When you first load the page the slider is rounded on the top left and bottom right, but when you resize the window (just a little bit) the rounded corners disappear! I cannot find the culprit, the responsiveness should continue to work with the custom css, but it does not. Thank you for any help.
https://www.superherodigital.com/livescan/
Code that I'm using.
-webkit-border-top-left-radius: 50px;
-webkit-border-top-right-radius: 0;
-webkit-border-bottom-right-radius: 50px;
-webkit-border-bottom-left-radius: 0;
-moz-border-radius-topleft: 50px;
-moz-border-radius-topright: 0;
-moz-border-radius-bottomright: 50px;
-moz-border-radius-bottomleft: 0;
no need for these complicated tasks ...
Just follow the path below in Direct Admin and ... (file manager)
path:
example.com/wp-content/plugins/revslider/public/assets/css/rs6
open rs6
use ctrl+f and search rs-module
rs-module { position:relative;overflow:hidden;display: block;border-radius:25px }
put border-radius:25px or anything 35px , 45px ....... like up line ...
This is probably something to do with the slider declaring the CSS properties in JS (dynamically changing the DOM properties), removing any applied styles in your stylesheet. I can see you're applying these declarations on #rev_slider_1_1_wrapper.
I would add a class to this instead, and apply the border radius to a new class.
.rev-slider-border-radius {
-webkit-border-top-left-radius: 50px;
-webkit-border-top-right-radius: 0;
-webkit-border-bottom-right-radius: 50px;
-webkit-border-bottom-left-radius: 0;
-moz-border-radius-topleft: 50px;
-moz-border-radius-topright: 0;
-moz-border-radius-bottomright: 50px;
-moz-border-radius-bottomleft: 0;
}
Then add the class to the slider wrapper element if it is in your HTML:
<div id="rev_slider_1_1_wrapper" class="rev_slider_wrapper fullwidthbanner-container avada-skin-rev-nav rev-slider-border-radius"> ... </div>
Or, if the JS is generating this, apply the class via JS after the slider has been initialised:
$(function() {
$('.rev_slider_wrapper').addClass('rev-slider-border-radius');
});
You can add a wrapper around the slider revolution slider with the class roundedslider where the roundedslider class has following style attributes:
.roundedslider{
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFW…9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);
position: relative;
z-index: 1;
overflow: hidden;
}
This works perfect in the example here also: http://revolution.themepunch.com/home-slider-boxed/
All other questions about ThemePunch products are answered at http://themepunch.com/support-center
Hope this helps you further ?
To me this is working fine, just substitute your slider and the radius you like on the corners:
.rev_slider, .rev_slider_wrapper, .rev_slider_wrapper img, .tp-revslider-mainul, .tp-revslider-slidesli
{
-webkit-border-radius: 8px !important;
-moz-border-radius: 8px !important;
border-radius: 8px !important;
}
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist
Closed 9 years ago.
Improve this question
I want to create a title with a background like this:
But there is a problem, as you can see in the picture, there are 3 different backgrounds:
The first one is for the whole page
second one is just a circle
third is a black line.
I want to create this title but i have problems with backgrounds.
I've tried including Span tag into title h3 ... didn't work.
what should I do?
P.S: I want to make this background for all titles backgrounds, so I don't want to create just one background for one title, I want it to be responsive and look good on any title.
the markup
<h3>Meet the Team</h3>
the style
h3{
width:320px;
height:40px;
text-align:left;
background:black;
color:red;
padding:10px;
line-height:40px;
position:relative;
}
h3:before,h3:after{
position:absolute;
content:'';
}
h3:before{
width: 20px;
height: 20px;
border-radius: 100%;
background: #2C2C2C;
right: 174px;
top: 20px;
box-shadow: inset -2px -1px #3F3D3D;
}
h3:after{
width:160px;
height:4px;
background:red;
background: #2C2C2C;
right: 14px;
top: 28px;
box-shadow: inset -2px -1px #3F3D3D;
}
Demo:http://jsfiddle.net/9U8NQ/
I am looking at adding a border-top, 20px solid red;, and I want the bottom of this to be rounded. With the following it does seem to be working for me.
-moz-border-radius-bottomright: 12px 12px;
border-bottom-right-radius: 12px 12px;
-moz-border-radius-bottomleft: 12px 12px;
border-bottom-left-radius: 12px 12px;
How can I do it?
I'm not sure why you aren't able to produce the result, but the above code looks correct. I've provided a JS Fiddle example, and mine works. I'm assuming you added the border-top property to the box. I don't think you need two values for each border-property. Hope this helps.
Create a new layer object with an ID of box and apply the following CSS. If you add a paragraph within the box the border will not appear.
http://jsfiddle.net/brownlace/kEvrE/1/embedded/result/
/* css3 rounded corners */
#box {
border-top: 20px solid red;
border-bottom-right-radius: 20px;
border-bottom-left-radius: 20px;
-moz-border-radius-bottomright: 20px;
-moz-border-radius-bottomleft: 20px;
}
I suggest you to use border instead of border-top to make sure the property is applied to all borders.
border: 20px solid red;
In this case you can use border-bottom-left-radius: 12px; with one value because both are the same.
Also you can add vendor property for webkit:
-webkit-border-bottom-right-radius: 12px;
-webkit-border-bottom-left-radius: 12px;
Here is a fiddle.
After much poking around online, I've found lots of advice and examples for using CSS to style submit buttons, but they all result in rectangular buttons. I want to make a non-rectangular button that automatically sizes itself to fit the button legend. Specifically, I want the button to look like this (plus or minus the rounded corners):
Any suggestions?
Totally possible with border radius, but you will have to submit with JavaScript instead of the <button> element.
For instance:
.icon {
background-color: lightblue;
width: 100px;
padding: 4px;
margin: 10px;
border-top-left-radius: 10px;
-moz-border-radius-topleft: 10px;
border-bottom-left-radius: 10px;
-moz-border-radius-bottomleft: 10px;
border-top-right-radius: 60px 22px;
-moz-border-radius-topright: 60px 22px;
border-bottom-right-radius: 60px 22px;
-moz-border-radius-bottomright: 60px 22px;
}
Makes:
See it live:
http://jsfiddle.net/9zamA/
You could use the CSS border triangle trick: http://css-tricks.com/snippets/css/css-triangle/
You could use svg.
Closed. This question is off-topic. It is not currently accepting answers.
Want to improve this question? Update the question so it's on-topic for Stack Overflow.
Closed 10 years ago.
Improve this question
Can I ask how to change the css of my theme to make the page looks like this http://katiefreiling.com/ this site has its navigation which is purple not extended until the left and right corner. My navigition seems to be extended from left and right corner and my content and footer too. Is it possible to have a style or format similar to the link above? Thanks in advance this is my website http://michelebrunello.com/.
It is better to learn the concepts first and then ask questions. I don't know what picture is in your mid exactly but as per your demo website given i have added few css rules in your css please see the below css rules and try to add in your css.
line 35 white.css
#topmenu {
background: none repeat scroll 0 0 #212983;
border-color: #FFFFFF;
border-style: solid;
border-width: 1px 0;
margin-left: auto;
margin-right: auto;
width: 940px; }
line 11 white.css
#footer-widgets {
background-color: #FAFAFA;
border-top: 1px solid #E6E6E6;
margin-left: auto;
margin-right: auto;
width: 960px; }
line 901 style.css
#footer {
background: url("images/bgr-box-trans.png") repeat-x scroll 0 0 #E4E2DB;
border-top: 1px solid #EEECE6;
font-size: 11px;
height: 32px;
line-height: 22px;
margin-left: auto;
margin-right: auto;
padding: 20px 0; }
Try to implement the css first.